初始化項目:
npm init --y
全局或本地安裝typescript:
npm install typescript -g
創(chuàng)建tsconfig.json文件:
tsc --init
本地安裝eslint:
npm install eslint --save-dev
安裝eslint之后改抡,新建并配置.eslintrc.json(不是.eslintrc.js)文件。recommonded表示使用默認(rèn)推薦的檢查規(guī)則鸯绿。
{"extends": ["eslint:recommended"]}
安裝@typescript-eslint/parser,自定義的解析器屁桑,用于替代ESLint默認(rèn)的解析器,結(jié)合了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故俐,幫助應(yīng)用typescript的檢查規(guī)則
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"]}
最后補(bǔ)充其他需要的配置聲明。
parserOptions用于指定你想要支持的 JavaScript 語言選項紊婉,比如ECMAScript的版本,文件類型等等辑舷。env包含了代碼中可以使用的全局變量喻犁,例如包含了browser才可以使用console。rules是最基本的功能何缓,可以添加或者修改檢查規(guī)則肢础。
{"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"]
否則會報錯碌廓!