在 VSCode 中使用 Prettier

1. VSCode 安裝 Prettier 插件，不需要在項(xiàng)目目錄本地安裝 Prettier npm i -D prettier
2. 在項(xiàng)目目錄中創(chuàng)建 .prettierrc.js

module.exports = {
    // 是否使用尾逗號
    trailingComma: "none",
    // 按 Tab 鍵的時(shí)候的縮進(jìn)方式，true 使用 tab 縮進(jìn)，false 將 tab 轉(zhuǎn)換為空格縮進(jìn)
    useTabs: false,
    // useTabs: false 的時(shí)候，使用空格縮進(jìn)縮進(jìn)幾個(gè)空格
    tabWidth: 4,
    // 語句結(jié)尾是否加分號
    semi: true,
    // 字符串是否使用單引號
    singleQuote: true
};

3. 修改 VSCode 工作區(qū)配置文件 .vscode/settings.json

{
    // 對 js 文件關(guān)閉 vscode 自帶的 format
    // "javascript.format.enable": false,
    // 對 ts 文件關(guān)閉 vscode 自帶的 format
    // "typescript.format.enable": false,

    // 優(yōu)先對 js 文件采用 prettier 進(jìn)行 format，而不是 vscode 自帶的 format
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 優(yōu)先對 ts 文件采用 prettier 進(jìn)行 format，而不是 vscode 自帶的 format
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 保存的時(shí)候自動 format 代碼
    "editor.formatOnSave": true
}

在 VSCode 中使用 ESLint

1. VSCode 中安裝 ESLint 插件
2. 在項(xiàng)目目錄中本地安裝 ESLint npm i -D eslint
3. 在項(xiàng)目目錄中創(chuàng)建 .eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true,
        es2021: true,
    },
    parser: 'espree',
    parserOptions: {
        ecmaVersion: 'latest',
    },
    extends: ['eslint:recommended'],
    rules: {},
};

4. 修改 VSCode 工作區(qū)配置文件 .vscode/settings.json

{
    // 只使用 ESLint，不使用 Prettier 的時(shí)候，不要加下面三條
    /*
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true
    */

    // 保存的時(shí)候自動進(jìn)行 lint 檢測，并且自動修復(fù)
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

在 VSCode 中同時(shí)使用 ESLint 和 Prettier

1. VSCode 中安裝 ESLint 插件和 Prettier 插件
2. 在項(xiàng)目目錄中安裝 ESLint npm i -D eslint
3. 在項(xiàng)目目錄中安裝 eslint-config-prettier npm i -D eslint-config-prettier
4. 在項(xiàng)目目錄中創(chuàng)建 .prettierrc.js

module.exports = {
    // 是否使用尾逗號
    trailingComma: "none",
    // 按 Tab 鍵的時(shí)候的縮進(jìn)方式，true 使用 tab 縮進(jìn)，false 將 tab 轉(zhuǎn)換為空格縮進(jìn)
    useTabs: false,
    // useTabs: false 的時(shí)候，使用空格縮進(jìn)縮進(jìn)幾個(gè)空格
    tabWidth: 4,
    // 語句結(jié)尾是否加分號
    semi: true,
    // 字符串是否使用單引號
    singleQuote: true
};

5. 在項(xiàng)目目錄中創(chuàng)建 .eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true,
        es2021: true,
    },
    parser: 'espree',
    parserOptions: {
        ecmaVersion: 'latest',
    },
    extends: ['eslint:recommended', 'prettier'],
    rules: {},
};

6. 修改 VSCode 工作區(qū)配置文件 .vscode/settings.json

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}