vscode使用Eslint+Prettier格式化代碼怎么寫

VSCode 使用 ESLint + Prettier 格式化代碼

在現代的前端開發中，代碼質量和一致性是非常重要的。為了確保代碼風格的一致性，開發者通常會使用代碼格式化工具。ESLint 和 Prettier 是兩個非常流行的工具，它們可以幫助開發者自動格式化代碼并檢查代碼中的潛在問題。本文將詳細介紹如何在 VSCode 中配置 ESLint 和 Prettier，以實現自動格式化代碼的功能。

1. 安裝必要的插件

首先，我們需要在 VSCode 中安裝以下兩個插件：

• ESLint: 用于檢查和修復 JavaScript 代碼中的問題。
• Prettier - Code formatter: 用于自動格式化代碼。

你可以在 VSCode 的擴展市場中搜索并安裝這兩個插件。

2. 初始化項目

在開始配置之前，確保你已經初始化了一個 Node.js 項目。如果你還沒有初始化項目，可以通過以下命令創建一個新的項目：

mkdir my-project
cd my-project
npm init -y

3. 安裝 ESLint 和 Prettier

接下來，我們需要在項目中安裝 ESLint 和 Prettier 作為開發依賴：

npm install eslint prettier --save-dev

4. 配置 ESLint

4.1 初始化 ESLint 配置

在項目根目錄下運行以下命令來初始化 ESLint 配置：

npx eslint --init

這個命令會引導你完成一系列問題，幫助你生成一個 .eslintrc.js 配置文件。你可以根據自己的需求選擇配置選項。

4.2 配置 ESLint

生成的 .eslintrc.js 文件可能如下所示：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
};

你可以根據需要修改這個配置文件。例如，你可以添加或修改規則來滿足你的代碼風格要求。

5. 配置 Prettier

5.1 創建 Prettier 配置文件

在項目根目錄下創建一個 .prettierrc 文件，用于配置 Prettier 的格式化規則。例如：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2
}

5.2 創建 Prettier 忽略文件

你還可以創建一個 .prettierignore 文件，用于指定哪些文件或目錄不需要被 Prettier 格式化。例如：

node_modules/
dist/

6. 配置 VSCode

6.1 配置 ESLint 和 Prettier 的集成

在 VSCode 中，打開設置（可以通過 Ctrl + , 快捷鍵打開），然后搜索 eslint 和 prettier，找到以下設置項并進行配置：

• ESLint: Auto Fix On Save: 設置為 true，以便在保存文件時自動修復 ESLint 錯誤。
• Prettier: Require Config: 設置為 true，以確保 Prettier 使用項目中的配置文件。
• Editor: Format On Save: 設置為 true，以便在保存文件時自動格式化代碼。

6.2 配置默認格式化工具

在 VSCode 的設置中，搜索 format，找到 Editor: Default Formatter，并將其設置為 Prettier - Code formatter。

6.3 配置文件關聯

如果你使用的是 TypeScript 或 React，你可能需要配置 VSCode 以正確識別文件類型。你可以在 .vscode/settings.json 文件中添加以下配置：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

7. 解決 ESLint 和 Prettier 的沖突

ESLint 和 Prettier 有時會有一些規則沖突，例如縮進、引號等。為了解決這些沖突，我們可以安裝 eslint-config-prettier 和 eslint-plugin-prettier 插件：

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

然后在 .eslintrc.js 文件中添加以下配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // 添加這一行
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'], // 添加 'prettier'
  rules: {
    'prettier/prettier': 'error', // 添加這一行
  },
};

這樣，ESLint 和 Prettier 的規則就不會沖突了。

8. 測試配置

現在，你可以打開一個 JavaScript 或 TypeScript 文件，嘗試保存文件，看看是否會自動格式化和修復代碼中的問題。

9. 總結

通過以上步驟，你已經成功在 VSCode 中配置了 ESLint 和 Prettier，實現了自動格式化代碼的功能。這不僅提高了代碼的可讀性，還減少了代碼審查時的不必要討論。希望這篇文章對你有所幫助，祝你在開發過程中寫出更高質量的代碼！