eslint规范_代码规范化之Vue篇

v2-f4d936bfe4dfcfdebfd12f6eead23080_1440w.jpg?source=172ae18b

写在前面

代码规范化的重要性不在这里展开了。这一篇讲了Vue项目下如何做代码规范化的事情，主要涉及了eslint、prettier、husky+lint-staged、onchange、editorConfig这几个角色。

另外，虽然配置限于Vue项目，但整个思路也可以作为其他项目代码规范的借鉴！

希望你是vscoder~，因为接下来的配置实践都是在vscode中。

如果你来自其他编辑器，也提供了onchange的方法作为备用。

你需要提前准备：

vscode插件：ESLint、Vetur、EditorConfig for VS Code
node.js v8.10.0及以上

方法论

开始这个话题深入之前，有设定了几个期许目标：

已有成熟规范作为主体
支持自定义，自定义优先级大于规范主体（每个团队有自己的特别癖好）
配置放在项目级别（不要求统一团队成员的编辑器配置）

后来在看了why precise commits后，对具体的“发生形式”增加两个考虑维度。

formate/lint + auto-fix 发生形式：

在保存时（ctrl+s）
hook（比如 Pre-commit hook）

formate/lint + auto-fix 作用对象/粒度：

当前编辑文件
Staged files(git add 之后)的整个文件

实践

项目都由 Vue CLI 脚手架生成，当前版本：4.1.2

方法一

生成项目

按下面步骤走你。

选择Manually select features

选择相关的Babel和Linter / Formatter

选择 ESLint + Prettier

选择上 Lint on save 和 Lint and fix on commit

最后一个选择配置文件是单独出来，还是放在package.json，选择 In dedicated config files。

补补改改

在工作空间添加插件配置：

how？根目录新建vscode文件夹，里面新建settings.json文件，以下是settings.json内容；.gitignore中把 .vscode 给去掉！
why？满足插件配置放在项目级别的期许目标

{"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"vetur.validation.template": false
}

修改.eslintrc.js配置：

how？extends字段内容由"plugin:vue/essential"改为"plugin:vue/recommended"
why？看eslint-plugin-vue available rules ，"plugin:vue/essential" 仅包含Base Rules和Priority A:Essential，"plugin:vue/recommended" 包含Base Rules、Priority A:Essential、Priority B: Strongly Recommended、Priority C: Recommended。想要有vue/attributes-order 和 vue/order-in-components，so...

module.exports = {root: true,env: {node: true},extends: ["plugin:vue/recommended", "@vue/prettier"],rules: {"no-console": process.env.NODE_ENV === "production" ? "error" : "off","no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"},parserOptions: {parser: "babel-eslint"}
};

增加.eslintignore忽略文件配置：

build/*.js
node_modules/*

增加 .prettierrc.js prettier配置文件：

module.exports = {"semi": false,"arrowParens": "always","singleQuote": true
}

关闭生成项目内置的eslint-loader

how? 通过 vue.config.js 关闭 vue-cli lintOnSave
why? eslint-loader做 formate/lint + auto-fix 的前提是把项目跑起来，和使用eslint插件或者onchange npm包两种形式相比，不具有优势，且会增加编译的时间

module.exports = {lintOnSave: false
}

方法二

生成项目

按下面步骤走你～

依然是选择Manually select features！

这次不再选择Linter / Formatter

依然选择 In dedicated config files！

补补

prettier in eslint

需要npm包：babel-eslint、eslint、eslint-plugin-vue、prettier、eslint-config-prettier、eslint-plugin-prettier、vue-eslint-parser

eslint配置文件.eslintrc.js：

module.exports = {env: {"browser": true,"node": true,"es6": true},extends: ["eslint:recommended",'plugin:vue/recommended',"plugin:prettier/recommended","prettier/vue"],parser: "vue-eslint-parser",parserOptions: {"parser": "babel-eslint"},rules: {"no-console": process.env.NODE_ENV === "production" ? 2 : 0,"no-debugger": process.env.NODE_ENV === "production" ? 2 : 0}
};

忽略文件.eslintignore：

build/*.js
node_modules/*

prettier配置文件.prettierrc.js：

module.exports = {"semi": false,"arrowParens": "always","singleQuote": true
}

编辑器配置文件.vscode/settings.json：

{"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"vetur.validation.template": false
}

把.vscode从.gitignore中去除！

hook

需要npm包：husky、lint-staged
一个命令完事：npx mrm lint-staged
修改下package.json中lint-staged的内容

  "lint-staged": {"*.{js,vue}": ["vue-cli-service lint","git add"]}

其他

增加 onchange 候选方案，需要提前跑一下添加eslint-watch的命令：

how？yarn add onchange -D 安装 onchange包，其次在package.json添加脚本命令："eslint-watch": "onchange 'src/**/*.{js,vue}' -- eslint --fix {{changed}}"
why？实践章加入的formate/lint + auto fix的发生形式需借助vscode ESLint插件，考虑到成员使用webstorm等编辑器，本方案不给出其他编辑器配置，仅提供onchange方案，保证在其他编辑器中也有丝滑体验！

增加.editorConfig编辑器配置文件，注意 vscode下需要 EditorConfig for VS Code插件：

how? 拷贝了 Vue项目的配置

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.orgroot = true[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true[*.md]
insert_final_newline = false
trim_trailing_whitespace = false