vscode使用Eslint+Prettier格式化代码的详细操作
👉 step 1
1、安装Eslint插件和Prettier插件
2、 安装eslint
npm install eslint -g
👉 step 2
1、初始化项目
npm init -y
2、生成eslint配置文件
npx eslint --init
以下是我的配置
完了之后生成一个.eslintrc.json的文件
👉 step 3
1、vscode需要配置保存自动化格式
⚙ -> 设置 ->
Format On Save=》 ✔ （保存时格式化文件）
2、以什么风格格式化代码。
⚙ -> 设置 ->
Default Formatter-> 选择Prettier项
3、保存时总是执行fixAll
fixAll那选择true
4、总体配置：setting.json
{
"workbench.colorTheme": "Default Dark+",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
到这一步基本的保存后都可以有eslint基础的格式化了
👉 step 4
1、配置Prettier，创建一个 .prettierrc.json文件
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json然后写入配置：（按自己）
{
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"jsxSingleQuote": true
}然后检测vscode设置的Prettier: Enable勾选状态
这时候可以保存后可以prettier格式化了，但是不会eslint不会显示红色
👉 step 5
关闭所有不必要或可能与Prettier冲突的规则。
1、安装eslint-config-prettier和eslint-plugin-prettier
npm install --save-dev eslint-config-prettier npm install --save-dev eslint-plugin-prettier
2、然后在.eslintrc.json的 extends 最后加入plugin:prettier/recommended
确保下面格式是prettier
3、保存，重启vscode，爆红也生效了。
到这里就eslint和prettier就配完了
🔚 最后
一般情况下直接在.prettierrc.json配置即可，如果prettier没有这个配置的，就可以在.eslintrc.json中的“rules”中配置，举个例子：（配置全等）
效果👇
到此这篇关于vscode使用Eslint+Prettier格式化代码的文章就介绍到这了,更多相关vscode格式化代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于VUE3安装element ui失败的原因以及解决的相关资料,很多朋友升级使用Vue3了,但在安装element ui失败出错了,这里给大家总结下,需要的朋友可以参考下2023-09-09
ref和reactive一样,也是用来实现响应式数据的方法,下面这篇文章主要给大家介绍了关于vue3给动态渲染的组件添加ref的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
vue+element table表格实现动态列筛选的示例代码
这篇文章主要介绍了vue+element table表格实现动态列筛选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Vue嵌套iframe时$router.go(-1)后退bug的原因解析
这篇文章主要介绍了Vue嵌套iframe,$router.go(-1)后退bug的问题原因及解决方法,本文给大家分享问题原因所在及解决方案,需要的朋友可以参考下吧2023-09-09
vue elementUI table表格数据 滚动懒加载的实现方法
这篇文章主要介绍了vue elementUI table表格数据滚动懒加载的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
本文重点介绍axios如何配合vue搭建项目框架,文章给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
Vue3使用postcss-px-to-viewport实现页面自适应
postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 px 单位转换为视口单位,下面我们就看看如何使用postcss-px-to-viewport实现页面自适应吧2024-01-01
这篇文章主要介绍了vue打包生成的文件的js文件过大的优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了vue3 pinia踩坑及解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了vue封装图片滑块验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论