Vue项目使用EditorConfig、Eslint和Prettier实现代码规范Semicolon，有人不加。而且不同的人使用不同的开发工具，有的人喜欢用WebStorm，有的人喜欢用VSCode。..如果是一个人独立开发，当然这些都没有问题，想写什么就写什么。规范化代码的好处可能不会立即显现。而恰恰相反，在某些人的眼里，这可能是一种束缚。但如果是协作开发团队，代码标准化带来的好处是显而易见的。例如，统一团队成员的代码风格，方便后期维护，避免打扰GitDiff等。针对以上问题，本文将介绍如何在Vue项目中实现基本的代码规范配置。不同想法的人可能使用不同的开发工具，不同的开发工具有不同的默认配置。为了解决这个问题，这里我们使用开发工具配置工具EditorConfig来统一这些开发工具的默认配置。有时候在开发中难免会写一些语法错误等问题，比如使用了未声明的变量，switch语句中写的break少了等等，而这些问题要到编译或者运行时才会发现。针对这个问题，这里我们使用代码检查工具Eslint来检查这些代码问题，提前暴露并修复这些问题，而不是等到编译或者运行的时候报错。另外，每个人的代码风格都不一样。比如代码缩进有的人喜欢用Tab，有的人喜欢用Space，有的人设置行宽为80个字符，有的人设置为120以上等等。为了解决这个问题，这里我们使用代码格式化工具Prettier来统一这些代码风格。实现考虑到Vue项目有的是用VueCLI构建的，有的是用Webpack或者其他工具构建的，所以接下来我会根据不同的构建工具使用VSCode开发工具来实现代码规范。使用VueCLI创建的Vue项目为新项目添加代码规范当我们使用vuecreate命令创建新项目时，命令行界面会询问我们是否选择Linter/Formatter，这是VueCLI提供的代码规范工具，这里我们需要选择。选择Eslint+Prettier后，命令行会询问我们选择哪种Eslint配置。列表中的配置都是比较大众化的，大家可以根据自己的需要进行选择。这里我们选择Eslint+Prettier。自动执行lint规则配置接下来，命令行还会询问什么时候自动执行lint。这里我们需要同时选择两者。选择后，无论是保存文件还是使用Git提交代码，lint都会自动执行，并自动Fixbugs（提交代码时）。选择一个独立的配置文件最后，命令行还会询问是将这些配置放在单独的文件中，还是全部放在package.json中。考虑到模块的清晰度和后期维护，这里我们选择Indedicatedconfigfiles。最后，项目初始化完成后，我们使用开发工具打开项目，会发现在项目的根目录下多了一个.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,//当标签属性较多时，标签arrow>另起一行arrowParens:'always',//箭头函数参数总是加括号quoteProps:'as-needed',//属性需要时加引号添加了printWidth:80,//每行字符数};其次，我们还需要对开发工具做一些配置，让开发工具能够识别我们刚刚添加的Prettier配置。以VSCode开发工具为例。首先，我们需要在扩展商店中找到并安装Prettier插件。其次，我们还需要将开发工具中的默认格式化工具设置为Prettier。然后，选择“Configuredefaultformatter”，然后选择Prettier，这样开发者工具就会使用Prettier作为默认格式化程序。最后，我们还需要检查开发工具中设置的FormatOnSave设置。这样，当我们保存文件时，开发工具会自动使用之前设置的默认格式化工具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#Linebreakend_of_line=lf#保存文件后是否在文件末尾插入一行insert_final_newline=true#删除行末空格trim_trailing_whitespace=true现有项目添加代码规范假设有一个Vue项目现在，Eslint、Prettier和EditorConfig都没有配置，那么我们应该怎么实现代码规范呢？安装配置Eslint首先，我们可以根据VueCLI官方文档的推荐，使用vueadd命令安装Eslint插件：这里我们使用vueadd命令，而不是npminstall命令。这是因为vueadd命令会自动为我们安装和配置相关依赖的插件。但是npminstall只是安装指定的插件，需要我们手动实现依赖插件的安装和配置。安装完成后，命令行会提示我们选择哪种Eslint配置：这里我们选择Prettier，同时选择automaticlintrules，这样VueCLI会自动为我们安装配置Prettier插件。配置Prettier和EditorConfig现有项目中Prettier和EditorConfig的配置与之前在新项目中的配置相同，这里不再赘述。使用Webpack等工具创建的Vue项目假设我们现在有一个使用Webpack或者其他工具创建的Vue项目，那么我们将无法享受到VueCLI给我们带来的便利。不过实现思路是一样的，实现起来也很简单。下面以Webpack工具为例。Eslint的配置请参考VueEslint官方文档。首先，我们需要安装Eslint插件。安装后，创建一个新文件。PrettierEslint和Prettier在一些规则上有冲突。根据Prettier官方文档，我们可以通过安装eslint-config-prettier插件来解决。安装完成后，需要修改Eslint配置。然后创建一个Prettier配置文件.prettierrc.js并进行配置，最后设置Prettier为默认格式化工具（参考上一篇文章，这里不再赘述）。配置Webpack根据Webpack官方文档，如果我们想让Webpack集成Eslint，需要安装eslint-webpack-plugin插件。安装完成后，还需要配置Webpack。//webpack.config.dev.jsconstESLintPlugin=require('eslint-webpack-plugin');module.exports={//...plugins:[newESLintPlugin({extensions:['js','vue'],排除:'node_modules',}),],//...};最后重启项目。如果代码有问题，命令行会显示具体的Eslint错误信息。ConfiguringEditorConfigEditorConfig配置与之前在新项目中的配置相同，这里不再赘述。小结本文主要介绍如何在Vue项目中实现代码规范，主要使用Eslint+Prettier+EditorConfig等工具。也可以参考非Vue项目中的实现，本质上是一样的。其实代码标准化不仅有利于团队协同开发，对于个人开发也有很多好处。最直观的是，它可以促使我们养成良好的编码习惯，而不是“随便编码”。这个好习惯帮助我们走得更好、更远。
