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上的原文档，至少在出现问题时知道去哪找解决方法嘛。