背景

每个人的代码格调不同，比方有的人代码缩进喜爱用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.jsmodule.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.jsconst ESLintPlugin = require('eslint-webpack-plugin');module.exports = {  // ...  plugins: [    new ESLintPlugin({      extensions: ['js', 'vue'],      exclude: 'node_modules',    }),  ],  // ...};

最初重启我的项目即可。如果代码有问题，命令行就会显示具体的Eslint报错信息。

配置EditorConfig

EditorConfig配置和前文在新我的项目中的配置是同样的步骤，这里不再赘述。

总结

本篇文章次要介绍了如何在Vue我的项目中实现代码标准，次要应用了Eslint + Prettier + EditorConfig等工具。在非Vue我的项目中也能够参考着实现，实质上都是一样的。

其实，代码规范化不仅对团队协同开发有帮忙，对于集体开发，也有不少益处。最直观的就是，能够促使咱们养成良好的代码习惯，而不是“随便编码”。这种好习惯有助于咱们走得更好, 更远。