WdBly Blog

懂事、有趣、保持理智

周维的个人Blog

懂事、有趣、保持理智

站点概览

周维 | Jim

603927378@qq.com

推荐阅读

Vscode + TypeScript + Eslint + Prettier 项目初始化配置

Vscode + TypeScript + Eslint + Prettier 项目初始化配置

开始一个新项目之前,首先应该搭建好项目的各种环境,如运行环境Node,依赖环境Mysql、Redis,开发环境IDE、Lint、TS等,今天我们来从零开始配置一个新项目。

初始化项目

初始化package.json文件

  • npm init

安装项目常用Eslint相关依赖、插件、和配置。

// 安装基础 Eslint npm i -d eslint // 安装eslint常用插件和配置 Prettier npm i -d prettier eslint-config-prettier eslint-plugin-prettier // 安装Ts的Lint插件,用于解析typescript npm i -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Prettier是对代码格式校验的工具,可单独使用,不同于Eslint对代码质量如:未使用变量、三等号、全局变量声明等问题。Prettier只是检测代码格式如:单行代码长度、tab长度、空格、逗号表达式等问题(并格式化代码)。通常它们可以一起使用,但Prettier和Eslint的规则有部分交集部分,如果直接一起使用,则有可能产生冲突。

eslint-config-xxx是第三方规则的集合,eslint-plugin-xxx是应用第三方插件,它们安装后在.eslintrc.js中的extends属性中,可以配置使用,对于eslint-config-xxx包直接 extends: [‘xxx’],对于eslint-plugin-xxx包,extends: [‘plugin:xxx’]

配置Eslint规则

  • 新建.eslintrc.js配置文件
module.exports = { // 使用typescript解析器 parser: '@typescript-eslint/parser', // 不同的解析器parser,parserOptions的值不相同,具体参考对应解析器文档 parserOptions: { project: 'tsconfig.json', sourceType: 'module', }, plugins: ['@typescript-eslint/eslint-plugin'], extends: [ 'plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint', 'plugin:prettier/recommended', ], root: true, env: { node: true, jest: true, }, ignorePatterns: ['.eslintrc.js'], rules: { }, }; // 更多详情配置参考官方文档

配置Prettier

  • 根目录新建.prettierrc文件
{ "trailingComma": "all", // 所有地方末尾都可以加逗号 "tabWidth": 4, // tab的宽度 "semi": false, // 是否要分号 "singleQuote": true, // 单引号 "printWidth": 200 // 编辑器每行长度 ... }

结合vscode,保存自动格式化代码

当安装好 Eslint + Prettier + Ts后,我们不希望代码只给出提示,还希望能够保持后,按照配置规则,自动格式化,这个就需要vscode配合完成了。

  • contron(command) + shift + p 调出输入框
  • 键入 settion.json,并打开文件
  • 添加如下配置
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, ... }

配置package.json

有时我们希望通过命令行对所有代码进行检查,获取其它格式化操作,需要在package中配置命令

"scripts": { "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"", "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix", "test": "jest", ... },
提交

全部评论0

暂时没有评论...