将`prettier`和`eslint`引入的npm

前提条件 (Qian ti tiao jian)

已经执行了以下步骤。

【npm】准备Node.js项目

1. 项目的初始化

在初始化项目时，首先创建任意文件夹，并运行npm init命令。

mkdir sample
cd sample

npm init --yes

2. 引入更漂亮的模块

prettier是一个根据独立的编码规范来整理源代码的代码格式化工具。使用它可以自动整理源代码，更容易保持代码风格的一致性。

npm i -D prettier

通过在项目根目录下创建.prettierrc.json配置文件，可以自定义格式化选项。
当指定”singleQuote”: true时，将双引号转换为单引号。

{
  "singleQuote": true
}

您可以在官方文件中查看可用的选项。

此外，如果有不希望用prettier格式化的目录或文件，可以在.prettierignore中进行指定。

node_modules/
coverage/
dist/
package-lock.json

这个也需要在项目的根目录下创建，就像配置文件一样。

2. 引入eslint

ESLint是用于JavaScript的静态验证工具，可以在执行代码之前发现明显的错误和违反编码规范的地方。

npm i -D eslint eslint-config-prettier

与”prettier”类似，需要在项目的根目录下创建配置文件”.eslintrc.json”。

{
  // 適用する環境
  "env": {
    "node": true, // Nodejs グローバル変数と Nodejs スコープを検証
    "es6": true, // モジュールを除くすべての ECMAScript 6 機能を有効
    "commonjs": true // CommonJS グローバル変数と CommonJS スコープ を検証
  },
  // 構文解析（パーサー）
  "parserOptions": {
    // モジュール形式のソースコードを用います
    "sourceType": "module",
    // JS のバージョンは最新とします
    "ecmaVersion": "latest"
  },
  // プラグイン
  "plugins": [],
  /**
   *  ルールのインポート
   */
  "extends": [
    "eslint:recommended",
    "prettier" // eslint-config-prettier
  ]
}

与prettier类似，我们可以在.eslintignore文件中指定不需要通过eslint进行语法检查的目录和文件。

node_modules/
coverage/
dist/

3. 开发环境的限制

为了指定Node.js的主要版本，需要向package.json添加engines条目。

{
  ...,
  "engines": {
    "node": ">=14"
  }
}

同样，为了强制设置这一点，将在项目根目录下创建.npmrc文件。

engine-strict=true

如果安装了不受支持的Nodejs版本，那么在运行npm install命令时会显示错误消息，无法解决依赖关系。

4. Visual Studio Code 的配置

为了将到目前为止设定的编码规范应用于Visual Studio Code（以下简称vscode），首先需要安装扩展功能。

• ESLint

Prettier

接下来，在项目的根目录下创建一个.vscode文件夹，并在其中创建settings.json和extensions.json。

{
  // 保存時に eslint によるリントを実行
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // デフォルトのフォーマッターに prettier を指定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 保存時に prettier によって整形
  "editor.formatOnSave": true,
  // タブ幅を 2 に設定
  "editor.tabSize": 2,
  // タブにはスペースを使用
  "editor.insertSpaces": true,
  // 改行コードはを LF に設定
  "files.eol": "\n",
  // ファイル末尾には自動的に空行を挿入
  "files.insertFinalNewline": true
}

{
  // 拡張機能がインストールされていない場合、インストールの推奨を表示
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}

※ 如果使用了 TypeScript

如果项目中包含 Typescript，则需要添加和配置包。

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

@typescript-eslint/parser: TypeScript 構文を解析

@typescript-eslint/eslint-plugin: TypeScript で eslint を利用するためのプラグイン

将新增的包添加到eslint配置文件中。

{
  ...,
  "parser": "@typescript-eslint/parse",
  ...,
  "plugins": ["@typescript-eslint"],
  "extends": [
    ...,
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}