Eslint – 代码规范与自动修复
由于一个大项目肯定不是由一个来完成的,每个人都会有自己负责的版块,由于每个人的代码风格各异,所以急切需要一套公认的规范。
与其在各自完成自己的分工之后,整合代码的时候来规范代码,不如在书写代码的时候就开始规范。
建议程序猿在自己的代码风格还没有定型之前,慢慢开始习惯eslint的约束。
1.关闭 vs code 的自动保存
2.进入 vs code 的配置
//配置eslint
"eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件
"eslint.validate": [
"javascript", // 用eslint的规则检测js文件
{
"language": "vue", // 检测vue文件
"autoFix": true // 为vue文件开启保存自动修复的功能
}
],
// eslint 起修复作用主要的代码
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.autoSave": "afterDelay",
"eslint.format.enable": true
如果还是没有能够自动修复,那么可能是你的vs code的自动修复与eslint冲突:
"editor.formatOnType": true // 关闭vs code默认的自动修复
配置好环境后,我们创建一个项目,不需要通过vue-cli、express、create-react-app来创建,只需要通过npm init -y 创建一个默认的空项目就可以了
然后装这两个包,
npm i eslint standard --save-dev
在项目内添加一个.eslintrc.js文件,那么项目就具有了eslint的规则,此时我们在app.js里面写一些代码:
我们只需要Ctrl+S保存,它就会自动修复了
假如你想要其他限制,只需要选中下面的规则,放到.eslintrc.js文件的rules里面去就可以了
.eslintrc.js:
module.exports = {
root: true,
extends: [