VScode下搭配ESLint、TSLint、stylelint的代碼檢查配方

使用VScode打開項目時，避免項目路徑過深。儘可能作到開發a項目就打開a項目，如dir/path/path/a這樣的路徑，不要vscode打開dir來開發a。由於可能會致使eslint的一些提示出現不許確的現象。

關鍵詞：ESLint配置+自動修復、TSLint配置+自動修復、stylelint配置+自動修復

ESLint

1. 首先安裝eslint，並增長相關配置

$ yarn add eslint
複製代碼

新建.eslintrc.js和.eslintignore

// .eslintrc.js 此配置僅供參考
module.exports = {
   root: true,
   "parserOptions": {
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
     }
   },
   extends: [
   ],
   parser: 'typescript-eslint-parser',
   plugins: [
   'react',
   'typescript'
   ],
   'settings': {},
   rules: {
   // 縮進爲兩個空格
   "indent": ["error", 2]
   }
}
複製代碼

// .eslintignore  此文件是告訴eslint忽略哪些文件的
build/**
config/**
public/**
scripts/**
複製代碼

2. 安裝VScode擴展eslint，並實現自動修復代碼

安裝完後先重啓一下VScode，擴展才會生效。隨後開始在VScode設置中設置eslint,VScode > 首選項 > 設置，添加以下設置

{
     "eslint.autoFixOnSave": true,
   	// An array of language ids which should be validated by ESLint
     "eslint.validate": [
   	"javascript",
   	// jsx
   	"javascriptreact",
   	// vue
   	{
   	  "language": "vue",
   	  "autoFix": true
   	},
   	// ts
   	{
   	  "language": "typescript",
   	  "autoFix": true
   	},
   	// tsx
   	{
   	  "language": "typescriptreact",
   	  "autoFix": true
   	},
   	"html"
     ],
     "eslint.alwaysShowStatus": true,
}
複製代碼

TSLint

1. 安裝tslint，並增長相關配置

$ yarn add tslint 
複製代碼

// tslint.json
   {
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
    "rules":{
      "no-console":false,
      // 縮進
      "indent":[true, "spaces", 2],
      // 空行不超過兩行
      "no-consecutive-blank-lines": [
        true,
        2
      ],
      // 對齊
      "align": [true, "parameters", "statements"]
    },
    "linterOptions": {
      // 排除的文件
      "exclude": [
        "config/**/*.js",
        "node_modules/**"
      ]
    }
  }
複製代碼

2. 安裝VScode擴展eslint，重啓以後VScode > 首選項 > 設置，添加以下設置，便可實現出現ts錯誤時自動修復

// 自動修復
"tslint.autoFixOnSave": true
複製代碼

可是有個狀況是不能自動修復的，tslint的規則中縮進indent是有缺陷的。indent rule中有講到：

Indentation size is required for auto-fixing, but not for rule checking.

NOTE: auto-fixing will only convert invalid indent whitespace to the desired type, it will not fix invalid whitespace sizes.

意思就是，只能自動修復空格和tab的轉換，不能修復且檢查到規則中定的幾個空格/tab。

TSLint用下來感受還不怎麼成熟，沒有ESLint生態好。若是想要用ESLint來檢查typescript，能夠參考這裏

stylelint

1. 若是安裝了stylelint-config-recommended或者stylelint-config-standard就不用安裝stylelint

$ yarn add stylelint-config-recommended stylelint-config-standard
複製代碼

// .stylelintignore   忽略stylelint檢查的文件

/src/**/*.css
複製代碼

// .stylelintrc.json stylelint配置
{ 
   "extends": ["stylelint-config-recommended","stylelint-config-standard"],
   "rules": {
     "indentation": 2
   }
}
複製代碼

2. 安裝VScode擴展stylelint並重啓

到這裏stylelint就能夠檢查除css外的樣式語法規則了，如：

那麼問題來了，如今並不能自動保存修復錯誤！

繼續！

3. 安裝VScode擴展Prettier - Code formatter實現自動修復樣式的語法錯誤，VScode > 首選項 > 設置

// 檢測scss語言並自動格式化 
"[scss]": {
  "editor.formatOnSave": true
}
複製代碼

Prettier能夠完成大部分的語法修復，可是也有不能修復的狀況。它也能夠和ESLint、TSLint搭配使用，固然也並不完美。相關用法參考：prettier-eslint 、prettier-tslint

---

本文只是粗淺的講了一下如何實現VScode下的代碼檢查及自動修復，至於相關配置及選項的詳細講解，仍是建議看一下github上的原文檔，至少在出現問題時知道去哪找解決方法嘛。