首页
吐槽
友链
关于
Search
1
【React Native】如何拨打电话?
782 阅读
2
WHMCS官方最新版下载+开心教程
759 阅读
3
为TypeScript项目添加Eslint和Prettier
524 阅读
4
React Native原理和架构
360 阅读
5
本站免费提供微软office A1P、A1账号
306 阅读
前端开发
后端开发
源码分享
技术分享
生活娱乐
影视评价
闲言碎语
登录
Search
标签搜索
ios
前端
JavaScript
阿里
Teambition
typecho
小火箭
shadowsocks
React
React Native
SQL
eslint
prettier
typescript
GraphQL
WHMCS
WHMCS开心版
Zsh
on-my-zsh
代理
夜雨
累计撰写
31
篇文章
累计收到
46
条评论
首页
栏目
前端开发
后端开发
源码分享
技术分享
生活娱乐
影视评价
闲言碎语
页面
吐槽
友链
关于
搜索到
1
篇与
typescript
的结果
2021-06-25
为TypeScript项目添加Eslint和Prettier
众所周知,代码质量检查和代码风格的统一对于一个项目来说非常的重要,也有助于避免一些低级的错误。相信很多人都已经在JavaScript项目中使用ESLint和Prettier了,但我猜大多数人不太清楚如何在TypeScript项目中进行配置,本文就来介绍具体的配置步骤。为TypeScript设置ESLint让ESLint支持TypeScriptESLint本身不是为了TypeScript设计的,但是它能通过配置parser来支持不同的语言,进而实现对TypeScript代码的检查和修复。yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --deveslint: ESLint库本身@typescript-eslint/parser: TypeScript团队提供的ESLint parser,用于实现支持TypeScript代码的lint@typescript-eslint/eslint-plugin: ESLint插件,包含一系列TypeScript相关的ESLint规则然后,添加在项目根目录添加.eslintrc.js,一个基本的例子如下:module.exports = { parser: '@typescript-eslint/parser', // 指定parser plugins: ["@typescript-eslint"], // 启用插件 extends: [ 'plugin:@typescript-eslint/recommended', // 使用推荐的规则,来自@typescript-eslint/eslint-plugin ], parserOptions: { ecmaVersion: 2020, // 让parser按更新的语法来解析 sourceType: 'module', // 让parser按ESM解析 }, rules: { // 此处书写需要覆盖的配置 // 例如,"@typescript-eslint/explicit-function-return-type": "off", }, };其中有些细节值得一提:extends部分的plugin:@typescript-eslint/recommended是可选的,但对于绝大多数项目推荐使用,如果有不合适的可以单独调整。另外,在配置plugin:@typescript-eslint/recommended-requiring-type-checking中还包含了一系列依赖类型信息的规则,这些规则能帮助你更好的规范代码,但可能会带来一些性能上的损耗,相关信息详见 此处 。parserOptions支持的配置可以分别在ESLint文档和@typescript-eslint/parser的README中查阅,在配置ESLint支持React和需要类型信息的规则时会用到。配置PrettierPrettier和ESLint是两个独立的工具,Prettier专注于代码格式化,而ESLint专注于代码质量检查(顺便提供了一些修复)。Prettier的格式化和eslint --fix都会涉及代码风格的调整,有时二者会发生冲突。目前社区中处理这个问题的工具有以下几种:prettier-eslint:这是一个JS模块,其处理方式是将代码先由Prettier处理一次,再将输出进行eslint --fix得到最终结果。已不推荐使用。eslint-plugin-prettier:这是一个ESLint插件,该插件实现了一系列额外的ESLint规则。这些规则使用Prettier来检查代码格式,如果格式与Prettier期望的不同,会抛出对应的ESLint错误。同时这些错误在eslint --fix时会交由Prettier进行修复。eslint-config-prettier:这是一个ESLint配置,该配置将可能与Prettier冲突的规则关闭,从而使得你能将Prettier于其他的ESLint配置(如eslint-config-airbnb)一起使用。目前推荐的实践是将eslint-plugin-prettier和eslint-config-prettier结合使用,下面就介绍如何进行配置。首先需要安装相关依赖:yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev然后在根目录添加Prettier的配置文件:module.exports = { semi: true, trailingComma: 'all', singleQuote: true, printWidth: 120, tabWidth: 4, // 格式与eslint的overrides一致 "overrides": [ { "files": "*.json", "options": { tabWidth: 2 } }, { "files": ["*.html", "legacy/**/*.js"], "options": { printWidth: 240 } } ] };最后更新ESLint的配置即可:module.exports = { parser: '@typescript-eslint/parser', // 指定parser plugins: ["@typescript-eslint"], // 启用插件 extends: [ 'plugin:react/recommended', // 使用react的推荐规则 'plugin:@typescript-eslint/recommended', // 使用推荐的规则,来自@typescript-eslint/eslint-plugin 'plugin:prettier/recommended', // 使用eslint-plugin-prettier推荐的配置,注意需要在最后一个 ], parserOptions: { ecmaVersion: 2020, // 让parser按更新的语法来解析 sourceType: 'module', // 让parser按ESM解析 ecmaFeatures: { jsx: true, // 支持解析JSX }, }, rules: { // 此处书写需要覆盖的配置 // 例如,"@typescript-eslint/explicit-function-return-type": "off", }, settings: { react: { version: 'detect', // 让eslint-plugin-react自动检测react版本 }, }, };extends字段中添加的plugin:prettier/recommended是eslint-plugin-prettier提供的推荐配置,其中引用了eslint-config-prettier并设置相应的规则,这个配置相当于:{ "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off" } }有时候会在网上的文章中看到,extends字段中除了prettier外还有prettier/react之类的配置,但从eslint-config-prettier的8.0.0版本开始只需要一个prettier就能引入全部配置了
2021年06月25日
524 阅读
0 评论
0 点赞