记录nodejs使用express搭建一个api服务器程序(7)-引入ESLint和Prettier让代码更加规范,风格统一

此文章是我自己用来记录如何搭建一个以express为基础的api服务器框架的过程,并不是什么新手教程,并不会每一步都写得非常详细,如果您要阅读此文,需要一点nodejs和编写代码的基础知识

文接上篇 链接: 地址 https://blog.csdn.net/goodboy31985/article/details/106424696
在上文基础上,修改和完善api服务器的框架

ESLint和Prettier

ESLint
是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。
详细信息可以参考文档 ESLint文档中文和ESLint官方文档

Prettier
用来做代码格式化，有了Prettier之后，它能去掉原始的代码风格，确保团队的代码使用统一相同的格式，用官网的原话是"Building and enforcing a style guide"。它能支持很多格式.它和Linter系列比如ESLint的区别在于Prettier是一个专注于代码格式化的工具，对代码不做质量检查。
Prettier官网

将ESLint和Prettier结合使用,可以最大程度保证代码风格统一,质量上乘

在项目中引入ESLint和Prettier

以下内容参考了这篇文章Using ESLint and Prettier in a TypeScript Project

1. 首先引入eslint

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

其中各个包的作用
eslint: eslint的核心包
@typescript-eslint/parser: 用于使eslint能够分析typescript代码
@typescript-eslint/eslint-plugin: 包含了一些常用的typescript代码规则
在项目根目录下创建 .eslintrc.js 文件 并输入以下内容

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: "module" // Allows for the use of imports
  },
  extends: [
    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from the @typescript-eslint/eslint-plugin
  ],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  }
};

---

如果你是在开发React,那可以另外再引入一个依赖包用来支持React

npm install --save-dev eslint-plugin-react

并修改.eslintrc.js文件为以下内容

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true // Allows for the parsing of JSX
    }
  },
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  },
  extends: [
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
};

---

2. 引入prettier

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

各个包的作用
prettier: prettier的核心包
eslint-config-prettier: 禁用一些eslint的规则,防止与prettier冲突
eslint-plugin-prettier: 让prettier作为eslint的一些规则来运行
然后在根目录下创建 .prettierrc.js 文件 内容如下

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4,
  endOfLine: "auto"
};

修改.eslintrc.js文件如下

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: "module", // Allows for the use of imports
    ecmaFeatures: {
      jsx: true // Allows for the parsing of JSX
    }
  },
  settings: {
    react: {
      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  },
  extends: [
    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    '@typescript-eslint/no-empty-function': 'off',//去除空函数报错
    '@typescript-eslint/no-var-requires': 'off',//去除require报错
  },
};

为了实现自动修正代码,我们可以在vscode的设置中进行配置,在保存文件时,自动进行代码修正
在vscode的配置文件 settings.json 中增加一个配置

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

你也可以尝试使用命令行进行代码的修正
可以在项目的package.json文件中,增加一个运行脚本

{
  "scripts": {
    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
  }
}

至此我们已经引入了eslint和prettier,如果你想要自己个性化的一些规则,可以在.prettierrc.js和.eslintrc.js的rules字段中进行个性化的配置
更加高级的用法需要参考eslint的文档