VScode下搭配ESLint、typescript-eslint的代码检查配方

Posted on Edited on

VScode下搭配ESLint、typescript-eslint的代码检查配方

使用eslint监测ts文件

typescript的全局使用

1
npm i -g typescript

通过tsc命令查看全局ts版本

1
tsc -v

新建node项目

  1. 建一个空的文件夹ts-eslint

  2. 在文件夹下执行node初始化命令

    1
    npm init

    一路回车后，node项目就初始化完毕了

  3. 通过命令 tsc –init 初始化一个tsconfig.json文件

ESLint

  1. 全局安装eslint

    1
    npm i -g eslint

  2. 在项目根目录执行eslint的初始化命令

    1
    eslint --init

    这里我选择使用airbnb的规范作为我的代码规范

  3. 等它安装完毕之后，自动生成了eslint的配置文件，如下：

  4. 我们给他添加一些配置（根据自己喜好来）

    这里我禁用了”no-console”这个规则

    1
    2
    3
    4
    5
    6
    module.exports = {
        "extends": "airbnb-base",
        rules: {
            "no-console": "off",
        }
    };

  5. vscode安装eslint扩展

  6. 打开vscode的配置文件setting.json

    通过快捷键（cmd + shift + P）输入settings，可以快速打开

    在配置文件中加入下列内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
    	"eslint.autoFixOnSave": true,
    	"eslint.validate": [
            "javascript",
            "javascriptreact",
       	    {
                "language": "typescript",
                "autoFix": true
            }
        ]
    }

    到这里，eslint就配置成功了，你可以自己创建一个js文件进行测试

Eslint的typescript插件

无需再装其他ts相关的插件了。

参考文档 typescript-eslint如何使用

  1. 确保已经安装TypeScript and @typescript-eslint/parser，然后安装@typescript-eslint/eslint-plugin
1
2
3
npm i typescript --save-dev
npm i @typescript-eslint/parser --save-dev
npm i @typescript-eslint/eslint-plugin --save-dev

  1. 修改.eslintrc配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.exports = {
        "extends": ["airbnb-base", "plugin:@typescript-eslint/recommended"],
        "parser": "@typescript-eslint/parser",
        "plugins": ["@typescript-eslint"],
        rules: {
            "no-console": "off",
            "@typescript-eslint/indent": ["error", 2],
        }
    };

  2. 配置完毕，项目中最终的依赖如下

    1
    2
    3
    4
    5
    6
    7
    8
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^1.7.0",
        "@typescript-eslint/parser": "^1.7.0",
        "eslint": "^5.16.0",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-plugin-import": "^2.17.2",
        "typescript": "^3.4.5"
      }

参考：eslint的规则 、typescript-eslint的规则、airbnb的规则