初始化项目:
npm init --y
全局或本地安装typescript:
npm install typescript -g
创建tsconfig.json文件:
tsc --init
本地安装eslint:
npm install eslint --save-dev
安装eslint之后,新建并配置.eslintrc.json(不是.eslintrc.js)文件。recommonded表示使用默认推荐的检查规则。
{"extends": ["eslint:recommended"]}
安装@typescript-eslint/parser,自定义的解析器,用于替代ESLint默认的解析器,结合了typescript-estree,帮助eslint检查typescript代码。
npm install @typescript-eslint/parser --save-dev
此处需要考虑typescript-eslint/parser与typescript版本的兼容性。
在eslintrc.文件中添加parser属性声明:
{"parser":"@typescript-eslint/parser","extends": ["eslint:recommended"]}
安装@typescript-eslint/eslint-plugin,帮助应用typescript的检查规则
npm i @typescript-eslint/eslint-plugin --save-dev
在eslintrc.文件中添加plugins属性声明以及extends中添加plugin的两项属性值
{"parser":"@typescript-eslint/parser","extends": ["eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended"],"plugins": ["@typescript-eslint"]}
最后补充其他需要的配置声明。
parserOptions用于指定你想要支持的 JavaScript 语言选项,比如ECMAScript的版本,文件类型等等。env包含了代码中可以使用的全局变量,例如包含了browser才可以使用console。rules是最基本的功能,可以添加或者修改检查规则。
{"parser":"@typescript-eslint/parser","plugins": ["@typescript-eslint"],"parserOptions": {"ecmaVersion":6,"sourceType":"module"},"extends": ["eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended"],"env": {"node":true,"browser":true,"commonjs":true,"es6":true,"jquery":true},"rules": {"linebreak-style": ["error","windows"],"no-console":0}}
VScode配置文件中添加对.ts文件的自动检测:
{"language":"typescript","autoFix":true}
一定要注意各版本兼容性,package.json:
{"name":"ts-test","version":"1.0.0","description":"","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"keywords": [],"author":"","license":"ISC","devDependencies": {"@typescript-eslint/eslint-plugin":"^2.19.0","@typescript-eslint/parser":"^2.19.0","eslint":"^6.8.0","typescript":"^2.9.2"}}
修改.eslintrc.json中的“outDir”后一定要在后面添加:
"include": ["src/**/*"],"exclude": ["node_modules"]
否则会报错!