2020最新編輯器集成eslint、prettier、stylelint，git提交預檢查代碼配置

webstorm

編輯器自動格式化配置：

plugin

webstorm設置搜eslintr、eslint、stylelint，如果沒有，搜plugin，安裝prettier、eslint、stylelint

File watchs

設置里搜File watchs，增加prettier,打鈎開啟自動格式化，則會在保存時自動格式化。

 

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底部出現：

git提交預檢查

1、安裝 husky和link-staged

在安裝之前，要先配置好eslint配置或prettier配置

執行以下命令，會自動配置好husky和lint-staged

npx mrm lint-staged

個人理解：

husky：用來給git對應的時機注冊鈎子的

lint-staged：用來監聽文件是暫存文件的

2、編輯 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"
}

3、切記，先 git add  ，提交到暫存， git commit 提交，就會執行lint-staged下配置的校驗命令，這里注意：針對提交到暫存的修改的文件代碼校驗，未修改的文件不會校驗，代碼沒有問題才會被真正提交，如果報出代碼錯誤，需要先修復所有代碼錯誤，才會自動格式化，否則不會先自動格式化。

4、在緊急的情況下，來不及修改代碼格式，可以使用 ​git commit --no-verify​  跳過代碼校驗。