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提交預檢查

一、安裝 husky和link-staged

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

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

npx mrm lint-staged

我的理解：

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​  跳過代碼校驗。