格式相关--Eslint、vetur、prettier、hooks、huscky、commitlint、commitizen

Eslint

eslint不仅作代码规范，还有检查变量声明了是否调用，是否有console.log语句等，就是同时兼顾代码格式和代码质量。

eslint的安装看本文档的下面章节：eslint安装、eslintrc配置项

Eslint有npm包和vscode插件
如果只安装npm包，只能通过运行eslint index.js，看到控制台报错：

安装vscode插件之后，就能看到带波浪线的报错效果了，一边写代码的时候就能直接看到错误，然后就能直接随手改正错误：

为什么npm包和vscode插件最好要同时安装：
虽然vscode插件也可以单独配置格式，但是如果项目中有.eslintrc.js文件，那么eslint插件会优先执行.eslintrc.js文件的配置。
并且不是每个人都会装eslint的vscode插件。此时eslint的npm包就作为一个保障，并且里面的.eslintrc.js配置就作为标准配置。

vscode插件可以读取npm包的eslintrc的配置，然后波浪线报错：
例如配置完eslint-plugin-compat后，如下波浪线报错：
(eslint-plugin-compat的配置在后面章节)

原始的eslint只能校验js文件，但是配合eslint插件eslint-plugin-vue(配置方式在后面章节)，使eslint也可以校验.vue文件中html代码，js代码，css代码：

但是eslint并没有插件可以校验.html、.less、.css等类型文件的插件。
例如.less文件如下格式，eslint并不会波浪线报错：

eslint对html代码和css代码的校验能力很弱，html代码和css代码需要依靠prittier来格式化。

校验和格式化是两回事。校验是波浪线提示你哪里错了，格式化是一键帮你修复有问题的代码。

Prettier

可作用于js,vue,html,css,scss,json,reactjs等大部分场景，暂时还不能格式化vue模版文件中template部分

Prettier也有npm包和vscode插件。
安装npm包后，运行npx prettier --write index.js，可以立马让代码变得工工整整：

安装vscode插件的目的：
还是和eslint一样的老问题，我需要每次执行npx prettier --write .才会修改格式。我想要在我写代码的时候，一Ctrl+S保存就能自动格式化代码
安装完vscode插件后，右键可以看到如下：

即使prettier和vetur都不安装，vscode右键格式化，也有vscode自带的格式化功能，可以对html、js、css等格式化。

相关配置建议写在.prettierrc.js，不写在settings.json里，因为settings.json不方便跟随代码提交git，而且有些开发者可能不配置settings.json，没有约束性。

很多项目不使用prettier的原因是，即使配置了.prettierrc.js文件，并提交到了git，如果开发人员不手动执行格式化，不配置保存自动修复，也能成功提交到git，所以说没有约束力。而且也没有波浪线报错提示，也没有控制台报错提示。而eslint是有约束力也有报错提示的。

Vetur

• 语法高亮
• 格式化
• 调试，以及错误检查
• 全局组件的定义提示等等

安装vetur之前：

安装vetur之后，代码有了颜色：

安装vetur之后，右键格式化，能看到vetur选项：

可以看到.vue文件里有波浪线报错：

vetur可以在vscode的setting.json中配置一些它自己的规则，但是不建议这么做。建议只使用vetur的代码高亮功能。

Eslint、vetur、prettier三者之间的关系

eslint和prettier规则冲突的解决办法：
(冲突就是指规则相反，如它用单引号它却用双引号)

• 只使用eslint，不使用prettier
• 认真核对eslintrc和prettierrc文件，保证没有冲突的规则
• 让eslint按照prettier的规则来检测代码质量
• 只用Prettier插件来美化代码，用ESLint插件来检查代码质量

让eslint按照prettier的规则来检测代码质量
使用到两个插件eslint-config-prettier和eslint-plugin-prettier
eslint-config-prettier：
会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。
接下来，我们需要在rules中添加，"prettier/prettier": "error"，表示被prettier标记的地方抛出错误信息。
使用方法：

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

eslint-plugin-prettier：
能够关闭一些不必要的或者是与prettier冲突的rules选项
使用方法：

//.eslintrc.js
{
  extends: [
    'standard', //使用standard做代码规范
    "prettier",
  ],
}

同时使用上面两个插件，简化配置：

{
  extends: [
    "plugin:prettier/recommended"
  ],
  rules: { 
    "prettier/prettier": "error"
  }
}

如上配置后，eslint的vscode插件会按照.eslintrc.js文件的配置，也就是100%按照prettier规则来进行波浪线提示，同时运行npm run dev，控制台也会按照prettier规则来报错；即使双方某个规则冲突，也是按照prettier的来。
如果想按照自己的想法修改规则，只有一种方法，就是.eslintrc.js文件里的rules的prettier/prettier里面改：

rules: { 
    'prettier/prettier': ['error', { singleQuote: true }]
}

直接在rules里改无效：

rules: { 
    'quotes': [1, 'single'] // 使用单引号
}

直接在rules里会导致，当修改为单引号时，prettier/prettier提示应该为双引号，当又修改为双引号时，rules里的quotes又提示应该为单引号，进入了死循环

直接在.prettierrc.js改也无效，因为eslint-config-prettier不会去
读取.prettierrc.js

只用Prettier插件来美化代码，用ESLint插件来检查代码质量

module.exports = {
    extends: ["eslint:recommended", "prettier"], 
    // 这里没有使用 eslint-plugin-perttier,只使用了eslint-config-prettier
};

只使用eslint-config-prettier的目的是，当右键使用prettier格式化代码后，运行npm run dev后eslint检测代码时，当eslint某个规则和prettier冲突时，将不对已经格式化后的代码报错。

prettier默认规则时(双引号)，eslint也默认规则时(单引号)，eslint-config-prettier可忽略掉冲突

prettier默认规则时(双引号)，eslint个性化配置(虽然说个性化设置，就在rules里显式的说明下使用当引号，其实默认就是单引号)，这种情况，eslint-config-prettier并不能忽略掉冲突

prettier个性化配置(设置为单引号)，eslint也个性化配置(设置为双引号)，这种情况，eslint-config-prettier也不能忽略掉冲突

prettier个性化配置(设置为双引号)，eslint默认规则时(单引号)，eslint-config-prettier可忽略掉冲突

总结来说，eslint-config-prettier可以忽略掉prettier和eslint的默认规则的冲突，如果因为手动修改eslintrc和prettierrc导致规则冲突，eslint-config-prettier并不能忽略掉冲突。

我目前参与的项目只使用了eslint，没有使用prettier

关于保存时自动修复格式

保存时自动修复eslint：

    //保存时自动修复eslint问题
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
     },
     // 让函数(名)和后面的括号之间加个空格
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     "vetur.format.defaultFormatter.js": "vscode-typescript"

当不使用eslint-config-prettier，也不使用eslint-plugin-prettier时，eslintrc文件里的rules也没有显式配置，即都是默认配置时，保存时是按照eslint默认配置修复。

当不使用eslint-config-prettier，也不使用eslint-plugin-prettier时，eslintrc文件里有配置自己的rules时，保存时按照rules的配置修复。

当只使用eslint-config-prettier时，并且eslint和prettier都是默认规则时，保存时，不会修复有冲突的规则。

当使用eslint-plugin-prettier和eslint-config-prettier时(具体用法看上面的章节)，并且配置'prettier/prettier': ['error', { singleQuote: true }]时，保存时能够按照prettier/prettier里的配置修复，即修复为单引号

当使用eslint-plugin-prettier和eslint-config-prettier时(具体用法看上面的章节)，并且配置"prettier/prettier": "error"时，保存时是按照prettier的规则修复，即使两者规则冲突，也是按照prettier修复。

可以总结说，保存时自动修复eslint这个配置，就是完全按照eslintrc文件来修复。

因为保存时自动修复eslint这个配置，是针对eslint的，所以那些eslint不能检测的文件类型，同样的也不能修复，目前只能修复.js .vue文件，.less .css文件不能修复。

下面这段是，保存时自动格式化，并且按照prettier格式化，即按照prettierrc文件格式化：

     "editor.formatOnSave": true, // 保存时自动格式化
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化时使用 prettier
     }

这个配置如何和前面的保存时自动修复eslint的配置一起使用的话，当遇到eslint和prettier规则冲突的时候，会出现诡异的事，vscode会先调用eslint修复变成单引号，再调用prettier格式化变成双引号，最后会因为不满足eslint的单引号配置而报错波浪线。

这个配置如何和前面的保存时自动修复eslint的配置一起使用，并且还同时使用了eslint-config-prettier和eslint-plugin-prettier，并且存在规则冲突：
.prettierrc:

{
    "singleQuote": true,
    "semi": true,
}

.eslintrc:

module.exports = {
    extends: ["eslint:recommended", "plugin:prettier/recommended"],
    ...其它配置
};

vscode会先调用eslint修复变成双引号(因为同时了eslint-config-prettier和eslint-plugin-prettier，所以eslintrc文件的最终效果是按照prettier的规则，及双引号)，再调用prettier格式化变成单引号，最后会因为不满足eslint的单引号配置而报错波浪线。

保存时自动格式化这个配置可以自动格式化的文件：.less .vue .js
不可以自动格式化的文件：.html .vue文件里的template部分

eslint安装

1.生成pachage.json文件：npm init -f

2.安装eslint：npm add eslint -d

3.初始化eslintrc文件：npx eslint --init

eslintrc配置项

env：

指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
env: { browser: true }
表示可以使用浏览器环境的变量，如：window、document、alert

parserOptions：指定你想要支持哪些JavaScript语法
和env配置的区别是：

parserOptions.ecmaVersion表示支持哪个es版本的语法，在eslintrc文件里可以不配置，因为extends.standard表示继承standard里的默认配置，在node_modules里的eslint-config-standard里：

parserOptions: {
    parser: 'babel-eslint'
}

这里设置的配置项将会传递到解析器中，被解析器获取到，进行一定的处理。具体被利用到，要看解析器的源码有没有对其进行利用。这里仅仅做了参数定义，做了规定，告诉解析器的开发者可能有这些参数
配置项目有：
"sourceType": "module",  // 指定JS代码来源的类型，script(script标签引入？) | module（es6的module模块），默认为script。为什么vue的会使用script呢？因为vue是通过babel-loader编译的，而babel编译后的代码就是script方式
"ecmaVersion": 6,     // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量。全局变量需要在env选项中进行定义
"ecmaFeatures": {     // Features是特征的意思，这里用于指定要使用其他那些语言对象
"experimentalObjectRestSpread": true, //启用对对象的扩展
"jsx": true,              //启用jsx语法
"globalReturn":true,          //允许return在全局使用
"impliedStrict":true          //启用严格校验模式

settings:

  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.config.js',
      },
    },
    "polyfills": [
      // Example of marking entire API and all methods and properties as polyfilled
      "Promise",
      "IntersectionObserver",
      // Example of marking specific method of an API as polyfilled
      "WebAssembly.compile",
      // Example of instance method, must add `.prototype.`
      "Array.prototype.push"
    ]
  }

规则共享参数
提供给具体规则项，每个参数值，每个规则项都会被注入该变量，但对应规则而言，有没有用，就看各个规则的设置了，就好比 parserOptions，解析器用不用它就不知道了。这里只是提供这个方法
如上面的

    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.config.js',
      },
    },

globales:

extends:

extends: [
    'plugin:vue/essential',
    'standard',
    'plugin:compat/recommended',
]

 extends: [
    'plugin:vue/essential',
    '@vue/standard'
]
plugins: [
    "vue",
    "compat"
]

用户可以轻松使用vue/essential、standard样式指南中的编码约定，而无需从头开始编写设置

plugin:compat/recommended这种是合并后的写法，原写法是：

 extends: [
    "compat",
 ],
"plugins": ["compat"]

plugins:

plugins: [
    "vue",
    "compat"
]

ESLint提供的默认规则涵盖了基本规则，但JavaScript可以使用的范围非常广泛。因此，您可能希望规则不在默认规则中。在这种情况下，可以在ESLint中开发自己的独立规则。为了让第三方开发自己的规则，ESLint允许使用插件。如果你在npm中搜索eslint-plugin- *，你可以找到第三方提供的大量自定义插件。
如果ESLint的默认规则未提供您要使用的规则，则建议您查找插件。
与可共享配置类似，它很容易设置。例如，如果要对React代码执行静态分析，可以安装名为eslint-plugin-react的插件，并使用以下设置来执行React语法特有的静态分析。
插件的作用类似于解析器，用以扩展解析器的功能，用于检测非常规的js代码。也可能会新增一些特定的规则。
如 eslint-plugin-vue，是为了帮助我们检测.vue文件中