关于前端如何提高项目可维护性的思考二（Vscode配置编程风格）

前言

  Vscode中的格式化配置一直困扰我很久，最近将Eslint和Prettier 配置过程又重新梳理了一下，为避免环境不一致，我将会在一个全新的Windows虚拟机环境内部操作，以后有关Vscode 的格式问题也在此更新。

环境准备

通过Vue-cli 搭建 Vscode 风格环境

1. 首先在vscode 中安装 ESlint、Prettier - Code formatter
2. 通过Vue-cli 搭建开发环境。
   3.用编辑器打开项目,并且设置Prettier - Code formatter为默认格式化工具 4.设置编辑器保存后自动格式格式化

个性化风格配置

  刚刚用Vue-cli创建的是默认风格，如果你对风格不满意可以在项目根目录下新建一个.prettierrc.js写入一下内容 举例文件（Prettier支持多种文件格式，这里仅用.prettierrc.js举例）例如我喜欢使用单引号，并且不喜欢使用分号。就可以在.prettierrc.js写入一下内容然后重启编辑器 。保存代码文件你就会发现代码会按照你配置要求进行格式化。

module.exports = {
  semi: false, // 结尾不用分号
  singleQuote: true, // 使用单引号
}

  那么这么多文件总不能全部都保存一遍吧。只需要当前工程目录下执行npm run lint即可。

  下面是我自己常用的一个配置，在这里分享一下。

module.exports = {
  printWidth: 240,
  trailingComma: 'none', // 禁止对象最后一个元素有逗号
  tabWidth: 2, // tab
  semi: false, // 结尾不用分号
  singleQuote: true, // 使用单引号
  bracketSpacing: true, // 对象属性前后加空格
  htmlWhitespaceSensitivity: 'ignore' // 禁止HTML标签 分离
}

  另外在风格没配置过程中，如果Eslint和Prettier 中有冲突项，将Eslint中的相关配置项目删除，仅在.prettierrc.js中添加。这是因为在当前配置中Prettier的优先级是最高的，这个后面会说明一下。
prettierrc官网配置项
Eslin官网配置项

Eslint的一些理解

   对于Eslint的核心我认为就是extends和rules只要理解好了他们配置Eslint以及解决Eslint和Prettier的冲突就不难，首先rules的优先级是高于extends，在extends中每个配置继承它前面的配置，也就是说后面的配置项会覆盖前面的配置项， "plugin:vue/essential" < "eslint:recommended" < "plugin:prettier/recommended"

plugin:vue/essential

  是一个解析器允许我们对.vue个文件中的<template>进行lint。如果我们在模板中使用复杂的指令和表达式，我们很容易在<template>上出错。这个解析器和eslint-plugin-vue的规则会发现一些错误。

  打开 node_modules\eslint-plugin-vue\lib\configs\essential.js文件就可以看见eslint-plugin-vue的配置项，有关Vue的报错信息大多都来自于这里。

  下图是我故意写出的一个语法错误，可以看到报错信息来自于essential.js中的配置项，也就是来自于上图中第十七行的配置项。   全部规则信息说明可以在eslint-plugin-vue官网中查看。

eslint:recommended

   是官方推荐规则,打开node_modules\eslint\conf\eslint-recommended.js就可以看见相关配置项目。如果想要使用其他规则，只需要替换本项即可，全部规则信息说明可以在eslint官网中查看。

plugin:prettier/recommended

   是prettier生成的配置规则，打开node_modules\eslint-plugin-prettier\eslint-plugin-prettier.js就可以看见相关配置项，并且在132行引入了 prettier。

  打开node_modules\prettier\index.js在18218行可以看见，引入了.prettierrc.js文件，这就是为什么在.prettierrc.js写的配置在Eslint中也生效了。

Eslint和Prettier中的冲突解决

   如果理解了上述内容解决Eslint和Prettier的冲突就不难，下面举个例子在Eslint中配置字符串必须使用单引号在Prettier中配置必须要使用双引号。保存文件后会发生下图的错误。

  那为什么会发生这种错误呢,因为prettier.js的配置项相当于在extends的plugin:prettier/recommended中,但是他的优先级是没有rules高的，所以被覆盖了。但是编辑器是读取的prettier.js配置作为格式化的依据。这样就导致了冲突的发生。

  解决这类问题也非常的简单，只需要删除rules中的重复项，然后重启编辑器让编辑器重新读取相关配置即可。

修改配置后一定要重启编辑器!!!
修改配置后一定要重启编辑器!!!
修改配置后一定要重启编辑器!!!

结语

   以上就是我对Eslint和Prettier 配置过程的理解。希望能帮到各位同学，相关代码会上传到Git，还请各位同学多提宝贵意见。