前端编码规范工具配置

是几年前用的工具，技术可能会有点旧，最近又用到了，记录一下。

本套工具可以帮助我们减少不必要的开发时间的浪费； 实现eslint语法检查，自动格式化代码功能。

1、值得参考并执行的规范

• Airbnb JavaScript 风格指南zh_CN
• Eslint rules
• Vue.js 风格指南

2、 工具介绍

editorconfig & eslint & prettier & vetur

（1）editorconfig

EditorConfig 可以帮助开发者在不同的编辑器和 IDE 之间定义和维护一致的代码风格，配合.editorconfig配置文件使用；

（2）eslint

EsLint帮助我们检查Javascript编程时的语法错误。

Eslint可以通过插入预定义的配置或自己设置的配置来扩展。

（3）prettier

这里重点说一下prettier。

prettier是一个代码格式化工具，它支持多种语言。

prettier的配置项很少，借助prettier我们可以自动格式化代码。

以下为prettier支持格式化的语言：

• JavaScript, including ES2017
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

由上可见，我们团队目前使用的大部分语言已经被囊括在prettier支持的格式化语言中。

同时，prettier可以作为eslint插件，与eslint结合使用。

（4）vetur

vetur是vscode的一个插件，支持.vue文件的语法高亮显示。

3、落地方案

（1）IDE: VS Code

• EditorConfig for VS Code
• ESLint
• Vetur

vscode 需要安装EditorConfig for VS Code插件，才能读取并应用.editorconfig配置文件；

ESLint 用于在ide中提示我们 error/warning；

Vetur 做vue的语法提示，配合eslint在ide中提示我们 error/warning。代码格式化交给 eslint（npm）；

（2）npm:

• eslint
• babel-eslint
• eslint-plugin-import
• prettier
• eslint-plugin-prettier
• eslint-config-prettier
• eslint-plugin-vue

eslint-plugin-prettier：用于将prettier作为eslint规则来运行。

eslint-config-prettier：通过使用eslint-config-prettier配置，能够关闭一些不必要的或者是与prettier冲突的lint选项。

eslint-plugin-vue：使eslint支持vue。vetur 有一个自带版本的 eslint-plugin-vue 来检查 <template> 部分，在这里，我们用自己安装的，禁用掉vetur的。

（3）关键配置文件

• .editorconfig

root = true

[*]
charset = utf-8
indent_style = tab
end_of_line = crlf
insert_final_newline = true
trim_trailing_whitespace = true

• .vscode/setting.json // ESLint（ide 插件），vetur（ide 插件）配置在这里

{
	"editor.tabSize": 2,
	"emmet.includeLanguages": {
			"vue-html": "html",
			"vue": "html"
	},
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"eslint.validate": [
			"javascript",
			"html",
			"vue"
	],
	"vetur.format.enable": false,
	"vetur.validation.template": false //vetur 有一个自带版本的 eslint-plugin-vue 来检查 <template> 部分，在这里，我们用自己安装的，禁用掉vetur的。
	}

• .prettierrc.js // prettier 配置，如逗号分号规则

• .eslintrc.js // eslint配置文件

// https://eslint.org/docs/user-guide/configuring

module.exports = {
	"root": true,
	"parserOptions": {
		"parser": "babel-eslint",
		...
	},
	...
	extends: [
		"plugin:vue/recommended", // eslint-plugin-vue,检查template
		"eslint:recommended", //eslint-plugin-import
		"plugin:prettier/recommended",// eslint-config-prettier
		"prettier/vue" // prettier配合eslint-plugin-vue
  ],
	"rules": {
		"prettier/prettier": [
			"error",
			{
				"useTabs": true,
				"tabWidth": 2,
				// 根据显示样式决定 html 要不要折行
				"htmlWhitespaceSensitivity": "css",
				// 换行符使用 crlf
				"endOfLine": "crlf",
				"overrides": [
					{
						"files": "*.html",
						"options": {
							"parser":"html"
						}
					},
					{
						"files": "*.vue",
						"options": {
							"parser":"vue"
						}
					}
				],
			}
		]
	}
}

4、参考链接

（1）eslint-plugin-vue插件可选规则：vuejs.github.io/eslint-plug…

（2） babel-eslint

（3）eslint-config-prettier