[Vue3+Vite+TS プロジェクトは ESlint + Prettier を統合し、コード仕様のチェックとコードのフォーマットを実現します]

序文

この記事では主に、Vite で作成された Vue3 + ts プロジェクトに Eslint + Perttier を統合して、コード仕様チェックを実装し、vscode エディターで保存されたコードの自動フォーマットを設定する方法について説明します。これは、vite で作成されたプロジェクトには eslint コードがないためです。チェック機能はデフォルトで付いていますが、複数人で開発するプロジェクトではコードチェック機能やコード整形機能は欠かせないので、ベテランの方々のお役に立てればと思い、ブログ形式でまとめてみました。役に立ったので、「いいね！」+「お気に入り」をクリックしてください。より多くの人を助けることを願っています。

プロジェクトを作成する

vite が提供するデフォルトのテンプレートを使用して vue3 + ts プロジェクトを直接作成するためにここにいます

# 如果npm 的版本是6.x版本，则使用下面这条命令创建项目
npm create vite@latest vite-vue3-ts --template vue-ts

# 如果npm 的版本是7+ 以上版本，则使用以下命令
npm create vite@latest vite-vue3-ts -- --template vue-ts

このような vue3 + ts プロジェクトが作成され、vscode を使用してプロジェクトを開き、npm iを実行して依存関係をインストール
します。依存関係のインストールが完了したら、npm run dev を実行してプロジェクトを開始すると、ブラウザーで通常どおりアクセスできます。
ここに画像の説明を挿入

ESlintのインストールと初期化

ESlint をインストールします。

# 安装eslint
npm i eslint -D

ESlint を初期化します。

npx eslint --initコマンドを実行してeslintを初期化する
プロンプトに従って次のオプションを順番に選択します

You can also run this command directly using 'npm init @eslint/config'.
 
? 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? ...
Vue.js
 
? Does your project use TypeScript? » No / Yes
Yes
 
? Where does your code run? ... (用空格选中两个，回车确定)
√ Browser
√ Node
 
? What format do you want your config file to be in? ...
JavaScript
 
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now?
No

最後のメッセージでは、[いいえ] を選択するように求められ、npm は要求された依存関係を手動でインストールします。

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

初期化が完了すると、プロジェクトのルートディレクトリに .eslintrc.cjs ファイルが表示されます。これが eslint 構成ファイルです。

module.exports = {
    
    
    "env": {
    
    
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
    
    
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    
    
    }
}

package.jsonに次のコマンドを追加します。

 "scripts": {
    
    
 	// 执行该命令eslint会检测当前项目下所有的.vue,.js,.ts,.jsx,.tsx文件是否符合eslint的代码规范，并尝试自动修复
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
  },

npm run lintコマンドを実行すると、次のエラーが表示されます
.eslintrc.cjs ファイルを変更する

module.exports = {
    
    
  "env": {
    
    
      "browser": true,
      "es2021": true,
      "node": true
  },
  "extends": [
      "eslint:recommended",
      "plugin:vue/vue3-essential",
      "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [
  ],
  // 配置解析vue文件
  "parser":"vue-eslint-parser",
  "parserOptions": {
    
    
      "ecmaVersion": "latest",
      "parser": "@typescript-eslint/parser",
      "sourceType": "module"
  },
  "plugins": [
      "vue",
      "@typescript-eslint"
  ],
 // 添加规则
 "rules": {
    
    
   "@typescript-eslint/ban-types": [
      "error",
      {
    
    
          "extendDefaults": true,
          "types": {
    
    
              "{}": false
          }
      }
    ]
  }
}

npm run lintその後、コマンドを再実行すると、エラーは発生しません。

Prettier のインストールと構成

よりきれいにインストールします:

npm install prettier -D

より分かりやすく構成するには:

プロジェクトのルートディレクトリに .prettierrc.cjs ファイルを作成します。このファイルは Prettier の構成ファイルです。このファイルで Prettier フォーマットコードのルールを構成できます。次のように構成を追加します。

// prettier的默认配置文件
module.exports = {
    
    
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 不尾随分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 多行逗号分割的语法中，最后一行不加逗号
  trailingComma: 'none',
   // 单个参数的箭头函数不加括号 x => x
  arrowParens: 'avoid',     
  // 对象大括号内两边是否加空格 { a:0 }
  bracketSpacing: true,      
}

保存時にコードを自動的にフォーマットするように VScode を構成する

次の 2 つのプラグインを vscode にインストールします。

ESLint: このプラグインをインストールすると、プロジェクト内の ESlint ルールが自動的に検索され、検証プロンプトが表示されます。ESlint はコードをフォーマットすることもできます
Prettier - コードフォーマッタ: このプラグインをインストールしてコードをフォーマットしますが、コード品質の潜在的な問題の検査には注意を払いません。

vscode の設定ファイルを変更します。

開く: ファイル -> 設定 -> 設定 -> settings.json で編集

ここに画像の説明を挿入

settings.json ファイルに構成を追加します。

{
    
    
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 每次保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    
    
    // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
    "source.fixAll.eslint": true
  },
  // 把prettier设置为vscode默认的代码格式化工具
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // vue文件的默认格式化工具选择prettier
  "[vue]": {
    
    
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

ここで設定します。 vscode エディターでコードを保存すると、コードは自動的にフォーマットされます。

ESLint と Prettier 間の競合の解決

競合の理由:

ESLint と Prettier は両方ともコードの書式設定を実行でき、settings.json ファイルでコードの書式設定に対して ESLint と Prettier を同時に有効にしているため、2 つの重複する書式設定ルールが矛盾していると、コードの書式設定時に競合が発生します。質問。

競合を解決するには:

eslint-config-prettier と eslint-plugin-prettier の依存関係をインストールします。

npm install eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier は ESLint でのコードフォーマットの構成をオフにします
eslint-plugin-prettier Prettier を ESLint のプラグインとして設定し、リンタールールとして実行させます。

次に、.eslintrc.cjs の extends の最後に構成を追加します。

  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    "plugin:prettier/recommended" // 解决ESlint和Prettier冲突
  ],

この構成の後、ESLint はフォーマット時に Prettier と重複するフォーマットルールを無視し、これらは Prettier によってフォーマットされるため、ESlint と Prettier の間の競合が解決されます。

vite を実行するように設定するときに、eslint の仕様を自動的に検出します

vite の実行中、デフォルトでは eslint の指定は自動的に検出されません。下図に示すように、main.ts ファイル内で変数 a を宣言しましたが、使用されていません。vite は正常に実行できますが、 eslint の警告が表示されますが、コマンドのnpm run lint実行時に eslint の警告メッセージが表示されます。vite
ここに画像の説明を挿入
の実行時に eslint の仕様を自動的に検出したい場合は、vite-plugin-eslint の依存関係をインストールし、関連する設定を追加するだけです。

vite-plugin-eslint をインストールします。

npm install vite-plugin-eslint -D

vite.config.ts ファイルを構成します。

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
    // 配置vite在运行的时候自动检测eslint规范
    eslintPlugin({
    
    
      include: ['src/**/*.ts', 'src/**/*.js', 'src/**/*.vue', 'src/*.ts', 'src/*.js', 'src/*.vue']
    })
  ]
})

vite.config.ts ファイルに vite-plugin-eslint プラグインの設定を追加すると、vite の実行時にコードに対して eslint 仕様チェックが実行されることがわかります。
ここに画像の説明を挿入
上記は、ESlint + Prettier を Vue3+Vite+TS プロジェクトに統合してコード仕様のチェックとコードのフォーマットを実現する具体的な実装です。