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