Vetur+ESlint+VSCode 实现自动格式化
1.在VSCode中安装以下两个插件:
- ESlint : 负责js代码格式化控制
- Vetur :负责Vue单文件的语法高亮和相关提示
不的不说这玩意刚开始用的时候,是真的恶心,因为各种提示加报错,但是如果你会用了,用习惯了就会爱上它的,因为你的代码会变得非常完美。
2.配置.eslintrc.js
这是保证eslint能项目启到提示报错和自动格式化的关键文件,里面配置了我们的项目的语法规范。 在用Vue-cli创建项目的时候,选择使用了ESlint的话基本上配置都差不多,对于我们来说,主要配置的是这几个部分需要注意:
- 第一个extends属性:这个属性是继承使用一些相关依赖的配置文件,如果你是使用vue-cli创建的项目的话,一般会帮你设置好:
extends: [
// 检测vue的
"plugin:vue/essential",
// ESlint标准的检测
"@vue/standard",
// TypeScript的检测
"@vue/typescript/recommended"
]
- 第二个ruls是关键所在。它告诉了ESlint如何去规范我们的JS代码,如果在VSCode设置使用eslint来格式化文档,在
Ctrl + s
的时候,代码会自动格式化成满足ESlint规则的格式。
// off :代表关闭检测
// warn : 视为一个警告
// error: 视为一个错误
// 下面对常用的做一个注释,其余均可以在ESlint官方文档中查到
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-unused-vars": "off",
"no-extra-semi": "error",
// 是否检测分号,是否需要分号
semi: ["error", "always"],
// 每行代码允许的最大缩进字符 ,2
"indent": ["error", 2],
// 函数括号前后是否需要空格
"space-before-function-paren": ["error", "always"],
"no-redeclare": "off",
"no-empty": "off",
"no-undef": "off",
// 是否检测引号,是单引号还会双引号
quotes: ["error", "single"],
"no-case-declarations": "off",
"vue/no-use-v-if-with-v-for": "off",
"vue/no-unused-components": "off"
}
具体使用规则请参照文档:ruls规则
这里顺带讲一个小技巧,如果你安装了ESlint并配置如上文件,如果出现某错误提示,但你不想用这个错误提示,可以这样:
- 鼠标放在提示代码位置:
- 然后在.eslintrc.js中设置或者更改它:
3.配置VSCode的setting.json保存时自动格式化
其实现在的VSCode非常的智能化,只要安装了插件马上会根据插件调整VSCode的配置。 上面也提到了Vetur+ESLint的方案来说,Vetur更多是负责语法高亮,ESLint才是提示和格式化的核心,所以我们在配置seetting.json的时候,其实只要设置一个就可以了:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
这样的VSCode就会自动以ESLint的规则去格式化我们的代码了。 注意点:因为你安装了Vetur,加上还有VSCode也有自己的格式化方式,切记三者只能存一,不然会产生冲突。如果你设置一下属性,记得将其改成false:
// 这是VSCode的默认格式化方式,将其设置为false
"editor.formatOnSave": false,
// 可以将这相关属性删掉
"vetur.format.defaultFormatterOptions"
其实只要配置好了.eslintrc.js,在VSCode使用eslint去格式化,项目就可以完美的提示和格式化了。
顺带在一个小事情,有的小伙伴在刚接触使用TypeScript开发的时候会碰到如下问题:
在tsconfig.js的配置:此时内心特别无奈,我特么明明配置路径的映射,为什么报错找不到模块呢???
其实这不是你的锅,这个锅可以甩给VSCode,我猜你在用VSCode打开这个项目的时候,不是添加在工作区里,就有几个项目是在一个编译器窗口打开的,像这样:
问题的原因:因为VSCode要判断你这种路径在不在,是需要检测你的tsconfig.js文件的,但是当你在工作区种打开项目,还有多个多项目同时打开的时候,VSCode是不会去检测你的tsconfig.js文件的,所以导致vscode识别不了你的路径
解决办法,用打开文件的形式,去单独打开一个项目,也就是一个VSCode窗体,就跑一个项目。这样可以检测到tsconfig.js文件了。