1/安装eslint ts-eslint
npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
2/配置eslint config
根目录下新建 .eslintrc.js
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
],
env: {
'browser': true,
'es6': true,
'node': true
},
parserOptions: {
'ecmaVersion': 2018,
'sourceType': 'module'
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended'
],
rules: {}
};
到此部最基础的eslint已经配置完并且生效了, 可以自己直接在rules里写入自己想用的规则.
3/ 一步到位配置严格的Airbnb规则
npm install eslint-config-airbnb-typescript
eslint-plugin-import@^2.20.1
eslint-plugin-jsx-a11y@^6.2.3
eslint-plugin-react@^7.19.0
eslint-plugin-react-hooks@^2.5.0
@typescript-eslint/eslint-plugin@^3.1.0
--save-dev
.eslintrc.js改成
extends: ['airbnb-typescript'],
parserOptions: {
project: './tsconfig.json',
},
然后在vscode里打开我们的pages/index.tsx, 发现已经一片红了, 对着相应的eslint规则调整一下就OK了
https://www.npmjs.com/package/eslint-config-airbnb-typescript
