复习 VSCode 上

在 VSCode 中使用 Prettier

1. VSCode 安装 Prettier 插件，不需要在项目目录本地安装 Prettier npm i -D prettier
2. 在项目目录中创建 .prettierrc.js

module.exports = {
    // 是否使用尾逗号
    trailingComma: "none",
    // 按 Tab 键的时候的缩进方式，true 使用 tab 缩进，false 将 tab 转换为空格缩进
    useTabs: false,
    // useTabs: false 的时候，使用空格缩进缩进几个空格
    tabWidth: 4,
    // 语句结尾是否加分号
    semi: true,
    // 字符串是否使用单引号
    singleQuote: true
};

3. 修改 VSCode 工作区配置文件 .vscode/settings.json

{
    // 对 js 文件关闭 vscode 自带的 format
    // "javascript.format.enable": false,
    // 对 ts 文件关闭 vscode 自带的 format
    // "typescript.format.enable": false,

    // 优先对 js 文件采用 prettier 进行 format，而不是 vscode 自带的 format
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 优先对 ts 文件采用 prettier 进行 format，而不是 vscode 自带的 format
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 保存的时候自动 format 代码
    "editor.formatOnSave": true
}

在 VSCode 中使用 ESLint

1. VSCode 中安装 ESLint 插件
2. 在项目目录中本地安装 ESLint npm i -D eslint
3. 在项目目录中创建 .eslintrc.js

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

4. 修改 VSCode 工作区配置文件 .vscode/settings.json

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

    // 保存的时候自动进行 lint 检测，并且自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

在 VSCode 中同时使用 ESLint 和 Prettier

1. VSCode 中安装 ESLint 插件和 Prettier 插件
2. 在项目目录中安装 ESLint npm i -D eslint
3. 在项目目录中安装 eslint-config-prettier npm i -D eslint-config-prettier
4. 在项目目录中创建 .prettierrc.js

module.exports = {
    // 是否使用尾逗号
    trailingComma: "none",
    // 按 Tab 键的时候的缩进方式，true 使用 tab 缩进，false 将 tab 转换为空格缩进
    useTabs: false,
    // useTabs: false 的时候，使用空格缩进缩进几个空格
    tabWidth: 4,
    // 语句结尾是否加分号
    semi: true,
    // 字符串是否使用单引号
    singleQuote: true
};

5. 在项目目录中创建 .eslintrc.js

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

6. 修改 VSCode 工作区配置文件 .vscode/settings.json

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