共计 3853 个字符，预计需要花费 10 分钟才能阅读完成。
背景
每个人的代码格调不同，比方有的人代码缩进喜爱用 Tab，有的人喜爱用 Space；有的人代码语句后会加上分号，有的人则不加。并且不同的人应用的开发工具也不同，有的人喜爱应用 WebStorm，有的人喜爱用 VSCode。。。
如果是一个人独立开发，这些当然都没啥问题，本人想怎么写就怎么写。代码规范化之后可能也没法立刻看到带来的益处。并且相同，可能在某些人看来反而是一种解放。
然而如果是团队协同开发，代码规范化所带来的益处就很显著。比方，对立团队成员的代码格调，不便前期保护，防止扰乱 Git Diff 等等。
针对以上这些问题，本文会介绍如何在 Vue 我的项目中实现根本的代码标准配置。
思路
不同人可能会应用不同开发工具，不同开发工具有着不同的默认配置，针对这个问题，这里咱们采纳开发工具配置工具 EditorConfig 去对立这些开发工具的默认配置。
有时候开发中难免会写出一些语法错误等问题，比方应用了未声名的变量，switch 语句少写了 break 等等，而这些问题要等到编译或者运行时才会被发现。针对这个问题，这里咱们应用代码查看工具 Eslint 来查看这些代码问题，将这些问题提前裸露进去并修复，而不是等到编译或运行时提醒报错才发现。
此外，每个人的代码格调不同，比方有的人代码缩进喜爱用 Tab，有的人喜爱用 Space，有的人一行宽度设置了 80 个字符，有的人设置了 120 甚至更多等等，针对这个问题，这里咱们应用代码格式化工具 Prettier 来对立这些代码格调。
实现
思考到有的 Vue 我的项目是用 Vue CLI 搭建的，有的是用 Webpack 或其余工具搭建的，因而接下来我将用 VSCode 开发工具，依据不同的搭建工具别离实现代码标准。
应用 Vue CLI 创立的 Vue 我的项目
给新我的项目增加代码标准
当咱们应用 vue create 命令创立新我的项目时，命令行界面会询问咱们是否抉择 Linter / Formatter，这就是 Vue CLI 给咱们提供的代码标准，这里须要选上。
抉择 Eslint + Prettier
抉择之后，命令行会接着询问咱们抉择哪一种 Eslint 配置。列表中都是比拟风行的配置，能够依据本人的须要抉择。这里咱们抉择Eslint + Prettier。
主动执行 lint 规定配置
接下来，命令行还会询问何时主动执行 lint，这里咱们须要把两个都选上，选上之后不论是保留文件，还是应用 Git 提交代码，都会主动执行 lint，并主动修复谬误（提交代码时）。
抉择独立配置文件
最初，命令行还会询问是否把这些配置放在各自独立的文件中，还是全副放在 package.json 中，思考到模块的明确性和前期保护，这里咱们抉择In dedicated config files。
最初，等我的项目初始化实现后，咱们应用开发工具关上我的项目，会发现我的项目的根目录多了一个 .eslintrc.js 文件。
这就是 Eslint 配置文件，能够参考 Eslint 官网配置文档理解更多。对了，开发工具还要装置 Eslint 插件并配置好，这样 Eslint 才会失效。
配置 Prettier
首先，咱们须要在我的项目的根目录新建文件.prettierrc.js，而后参考 Prettier 官网配置文档，配置一些罕用项，这里列出我常常应用的配置，大家能够依据须要自行调整。
// .prettierrc.js
module.exports = {
useTabs: false, // 敞开 tab 缩进，应用 Space 缩进
tabWidth: 2, // 每次缩进 2 个字符
semi: true, // 结尾加分号
singleQuote: true, // 应用单引号
jsxSingleQuote: true, // jsx 中应用单引号
trailingComma: 'es5', // 结尾逗号应用 es5 规定
bracketSpacing: true, // 括号和参数之间有空格
jsxBracketSameLine: false, // 标签属性较多时，标签箭头 > 另起一行
arrowParens: 'always', // 箭头函数参数永远加括号
quoteProps: 'as-needed', // 属性加引号须要加时再加
printWidth: 80, // 每行字符个数
};其次，咱们还须要给开发工具做一些配置，让开发工具辨认咱们刚刚增加的 Prettier 配置。
以 VSCode 开发工具为例，首先，咱们须要去扩大商店中查找并装置 Prettier 插件
其次，咱们还须要设置开发工具中的默认格式化工具为 Prettier
而后，抉择“配置默认格式化程序“
而后，抉择 Prettier，这样开发工具就会应用 Prettier 作为默认格式化工具。
最初，咱们还须要勾选上开发工具中设置的 Format On Save 设置。这样当咱们保留文件时，开发工具就会主动应用之前设置好的默认格式化工具 Prettier 进行格式化代码，并且格式化后会主动保留文件。
配置好 Prettier 之后，咱们能够以 src/main.js 文件为例，测试 Prettier 配置是否失效。
下图是 src/main.js 文件默认的状态，留神看文件中的双引号。
当咱们应用快捷键 cmd/ctrl+s 保留文件后，会发现双引号全副变成了单引号。这是因为咱们在 .prettierrc.js 文件中配置了应用单引号规定singleQuote: true，这也证实了 Prettier 配置失效了。
EditorConfig 配置
因为大多数开发工具都反对 EditorConfig，因而配置起来很简略。一般来说，只须要在我的项目的根目录创立一个 .editorconfig 文件，而后增加罕用配置项即可。这里我列出我常常应用的配置，大家能够依据须要自行调整。
# 顶层配置文件，不会持续向下层搜寻配置文件
root = true
# 匹配任意格式文件
[*]
# 字符集
charset = utf-8
# 缩进格调
indent_style = space
# 缩进值
indent_size = 2
# 换行符
end_of_line = lf
# 保留文件后文件开端是否插入一行
insert_final_newline = true
# 删除行尾空格
trim_trailing_whitespace = true给已有的我的项目增加代码标准
假如当初有一个 Vue 我的项目，并没有配置 Eslint, Prettier 和 EditorConfig，那咱们该如何实现代码标准呢？
装置并配置 Eslint
首先，咱们能够依据 Vue CLI 官网文档的举荐，应用 vue add 命令装置 Eslint 插件:
这里咱们应用的是 vue add 命令，而不是 npm install 命令。这是因为 vue add 命令会主动给咱们装置相干和依赖的插件，并配置好。而 npm install 只是装置了指定的插件，依赖插件的装置和配置还须要咱们手动去实现。
装置实现后，命令行会提醒咱们抉择哪一种 Eslint 配置：
这里咱们抉择 Prettier，并且把两个主动 lint 规定都选上，这样 Vue CLI 就会帮咱们主动装置 Prettier 插件并配置好。
配置 Prettier 和 EditorConfig
已有我的项目中的 Prettier 和 EditorConfig 配置和前文在新我的项目中的配置是同样的步骤，这里不再赘述。
应用 Webpack 等工具创立的 Vue 我的项目
假如咱们当初有一个应用 Webpack 或其余工具创立的 Vue 我的项目，那咱们就没法享有 Vue CLI 带给咱们的便当。不过，实现的思路都是一样的，实现起来也很简略，上面以 Webpack 工具为例。
配置 Eslint
参考 Vue Eslint 官网文档，首先咱们须要装置 Eslint 插件
装置好之后，新建文件.eslintrc.js，并增加罕用配置项
而后确保开发工具中的 Eslint 正确配置：
最初咱们能够测验下配置是否失效：
配置 Prettier
Eslint 和 Prettier 在有些规定上会有抵触，依据 Prettier 官网文档提醒，咱们能够通过装置 eslint-config-prettier 插件来解决。
装置好之后，还须要批改下 Eslint 配置。
而后新建 Prettier 配置文件 .prettierrc.js 并配置好，最初设置 Prettier 为默认格式化工具即可（参考前文，这里不再赘述）。
配置 Webpack
依据 Webpack 官网文档，如果想让 Webpack 集成 Eslint，咱们须要装置 eslint-webpack-plugin 插件。
装置实现后，还须要配置下 Webpack。
// webpack.config.dev.js
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// ...
plugins: [
new ESLintPlugin({extensions: ['js', 'vue'],
exclude: 'node_modules',
}),
],
// ...
};最初重启我的项目即可。如果代码有问题，命令行就会显示具体的 Eslint 报错信息。
配置 EditorConfig
EditorConfig 配置和前文在新我的项目中的配置是同样的步骤，这里不再赘述。
总结
本篇文章次要介绍了如何在 Vue 我的项目中实现代码标准，次要应用了
Eslint + Prettier + EditorConfig等工具。在非 Vue 我的项目中也能够参考着实现，实质上都是一样的。其实，代码规范化不仅对团队协同开发有帮忙，对于集体开发，也有不少益处。最直观的就是，能够促使咱们养成良好的代码习惯，而不是“随便编码”。这种好习惯有助于咱们走得更好, 更远。
