nodejs + typescript + koa + eslint + typescript eslint + prettier + webstorm

ESLint

安装

yarn add -D eslint

生成配置文件

yarn eslint --init

cli 选项

How would you like to use ESLint?
To check syntax and find problems
What type of modules does your project use?
Javascript modules (import/export)
Which framework does your project use?
None of these
Does your project use TypeScript?
Yes
Where does your code run?
Node
What format do you want your config file to be in?
JSON
Would you like to install them now with npm?
Yes

等待 eslint 安装依赖完毕后，移除 package-lock.json 文件（因为 cli 中安装依赖用的是 npm，而我用的是 yarn，yarn 有 yarn.lock 文件，两个同时存在会产生警告冲突）

.eslintrc.json

{
  "env": {
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 13,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    // 统一在语句某位加分号 ;
    "semi": [
      "error",
      "always"
    ],
    // 统一使用单引号 ''
    "quotes": [
      "error",
      "single"
    ]
  }
}

.eslintignore

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist

Rules

• ESLint Rules
• TypeScript ESLint Rules

TypeScript

安装、生成配置文件、package.json 中 scripts 标签内容参考上一篇 博客

WebStorm

插件推荐

安装 .ignore 插件可以生成各种工具的 ignore 文件，比较方便

Prettier

安装

yarn add -D -E prettier

创建配置文件

创建这两个文件：

1. .prettierrc.json 代码风格配置文件
   
   在文件内输入以下内容，更多配置参考 这里：

   我这里只配置了一个单引号，其他采用默认风格

   {
     "singleQuote": true
   }
   

2. .prettierignore 忽略代码风格文件（在忽略的文件夹或文件内不使用 Prettier）
   
   在文件内输入以下内容：

   # Ignore artifacts:
   dist
   node_modules
   

保存时自动格式化

prettier ide 集成

webstorm prettier

WebStorm 2021.3 配置后不生效，看 这里 或自行搜索。

我搜了下，没找到合适的解决方案（没空），我使用右键 Reformat with Prettier 或者快捷键手动格式化代码。

ESLint 集成

参考

Koa

安装

yarn add koa
yarn add -D @types/koa

package.json

scripts

scripts 中替换为以下内容:

1. 在 build 命令中新增了 yarn lint
2. 新增了 lint 命令

 "scripts": {
  "build-ts": "tsc",
  "build": "yarn build-ts && yarn lint",
  "debug": "yarn build && yarn watch-debug",
  "lint": "tsc --noEmit && eslint \"**/*.{js,ts}\" --quiet --fix",
  "serve-debug": "nodemon --inspect dist/server.js",
  "serve": "node dist/server.js",
  "start": "yarn serve",
  "watch-debug": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm:watch-ts\" \"npm:serve-debug\"",
  "watch-node": "nodemon dist/server.js",
  "watch-ts": "tsc -w",
  "watch": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm:watch-ts\" \"npm:watch-node\""
},