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

reahink發表於2019-03-11
VSCodeEsLint

使用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外的樣式語法規則了，如：

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

那麼問題來了，現在並不能自動儲存修復錯誤！

繼續！

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

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

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

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

相關文章