VScode下使用ESLint检查typescript代码

初始化项目:

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"]

否则会报错!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容