2020最新编辑器集成eslint、prettier、stylelint，git提交预检查代码配置

webstorm

编辑器自动格式化配置：javascript

plugincss

webstorm设置搜eslintr、eslint、stylelint，若是没有，搜plugin，安装prettier、eslint、stylelinthtml

File watchsvue

设置里搜File watchs，增长prettier,打钩开启自动格式化，则会在保存时自动格式化。java

VS code

1. 安装 "ESLint" 以及 "Prettier - Code formatter" 插件，打开 VSCode 点击「扩展」按钮，搜索 ESLint、prettier，而后安装便可
2. 点击左下角的"齿轮图标"，点击Setting后上端选择Workspace选项卡,（也能够在项目根目录下建立一个配置文件 .vscode/settings.json），添加如下配置： 

{
    // VSCode 中的 ESLint 插件默认是不会检查 `.vue`、`.ts` 或 `.tsx` 后缀的
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "typescript",
        "typescriptreact"
    ],
    // 开启保存时自动修复   
    "editor.codeActionsOnSave": {
        // eslint开启
        "source.fixAll.eslint": true,
         // stylelint开启
        "source.fixAll.stylelint": true
    },
      
    // prettier:保存时自动格式化全部支持文件：javascript/javascriptreact/typescript/typescriptreact/json/graphql
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
      
    // 或者仅指定js文件保存自动格式化
    // Set the default
    //"editor.formatOnSave": false,
    // Enable per-language
    //"[javascript]": {
       // "editor.defaultFormatter": "esbenp.prettier-vscode",
       // "editor.formatOnSave": true
    // }
      
    // 指定VSCode用于IntelliSense（智能感知）的ts版本，将内置版本更换为工做区版本
    "typescript.tsdk": "node_modules/typescript/lib"
}

而后你ctrl+s 你会发现你的文件格式切换了，而且vscode底部出现：node

git提交预检查

一、安装 husky和link-stagedreact

在安装以前，要先配置好eslint配置或prettier配置git

执行如下命令，会自动配置好husky和lint-stagedweb

npx mrm lint-staged

我的理解：typescript

husky：用来给git对应的时机注册钩子的

lint-staged：用来监听文件是暂存文件的

二、编辑 package.json 文件：

注意几点：

• lint-staged从v10.0.0对原始暂存文件的任何新修改都将自动添加到提交中，不须要手动写入git add 命令，目前网上看到的大部分教程都是带有git add 命令的，若是加了以后，lint-staged会报一个警告，也可能发生意想不到的错误。
• lint-staged从v10.0.0起，使用git stash来提升速度并在运行时提供备份，运行时必须有一个提交
• lint-staged从v10.0.0开始，须要Node.js 10.13.0或更高版本
• lint-staged从v10.0.0起，若是linter任务撤消了全部分阶段的更改，则lint-staged将停止提交。要容许建立空提交，请使用该--allow-empty选项
• lint-staged匹配的文件中，能够执行scripts的命令，也能够直接执行eslint修复命令等。
• lint-staged匹配的文件中，若是有多个命令能够写为数组
• lint-staged支持三种配置方式

            package.json

            .lintstagedrc

            lint-staged.config.js

            使用--config或-c标志指定配置文件

• lint-staged匹配的文件是glob模式，若是不带斜杠，会自动把项目中全部包含指定后缀的进行匹配，若是包含斜杠，则会在对应目录下，匹配全部合适的文件

 "scripts": {
   "eslint:fix": "npx eslint --fix --ext \".js,.jsx,.ts,.vue,.html,.md\"",
   "eslint:lint": "npx eslint --ext \".js,.jsx,.ts,.vue,.html,.md\"",
   "stylelint:fix": "npx stylelint \"**/*.css,.less,.scss\" --fix"
},
"husky": {
  "hooks": {
    "pre-commit": "npx lint-staged"
  }
},
"lint-staged": {
  "*.{js,jsx,ts,vue,html,md}": "npm run eslint:fix",
  "*.{css,less,scss}": "npm run stylelint:fix"
}

三、切记，先 git add  ，提交到暂存， git commit 提交，就会执行lint-staged下配置的校验命令，这里注意：针对提交到暂存的修改的文件代码校验，未修改的文件不会校验，代码没有问题才会被真正提交，若是报出代码错误，须要先修复全部代码错误，才会自动格式化，不然不会先自动格式化。

四、在紧急的状况下，来不及修改代码格式，可使用 ​git commit --no-verify​  跳过代码校验。