VS Code 代码格式化如何配置？ - 面试题

VS Code 代码格式化与 Lint 集成

VS Code 提供强大的代码格式化和 Lint 集成功能，帮助保持代码风格一致性和代码质量。

代码格式化

内置格式化器

VS Code 内置支持多种语言的格式化器：

JavaScript/TypeScript: TypeScript/JavaScript Language Service
HTML: HTML Language Service
CSS: CSS Language Service
JSON: JSON Language Service

格式化操作

格式化文档: Shift+Alt+F
格式化选中部分: Ctrl+K, Ctrl+F
格式化保存: 配置自动格式化

格式化配置

json
{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "editor.formatOnSaveMode": "file"
}

Prettier 集成

安装 Prettier

bash
npm install --save-dev prettier

配置 Prettier

创建 .prettierrc 文件：

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

VS Code 配置

json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

ESLint 集成

安装 ESLint

bash
npm install --save-dev eslint

配置 ESLint

创建 .eslintrc.js 文件：

javascript
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'indent': ['error', 2],
    'linebreak-style': ['error', 'unix'],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always']
  }
};

VS Code 配置

json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Stylelint 集成

安装 Stylelint

bash
npm install --save-dev stylelint stylelint-config-standard

配置 Stylelint

创建 .stylelintrc.json 文件：

json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "single",
    "no-duplicate-selectors": true
  }
}

VS Code 配置

json
{
  "stylelint.validate": ["css", "scss", "less"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

多格式化器配置

语言特定格式化器

json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  }
}

格式化器优先级

语言特定的格式化器
默认格式化器
内置格式化器

代码格式化规则

格式化规则配置

json
{
  "javascript.format.enable": true,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
  "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
  "javascript.format.placeOpenBraceOnNewLineForFunctions": false
}

TypeScript 格式化规则

json
{
  "typescript.format.enable": true,
  "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "typescript.format.insertSpaceBeforeAndAfterBinaryOperators": true
}

Lint 错误显示

错误级别

Error: 严重错误，必须修复
Warning: 警告，建议修复
Info: 信息，仅供参考
Hint: 提示，帮助改进

错误导航

F8: 跳转到下一个错误
Shift+F8: 跳转到上一个错误
Ctrl+Shift+M: 显示问题面板

自动修复

保存时自动修复

json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
    "source.organizeImports": true
  }
}

手动修复

快速修复: Ctrl+.
修复所有可修复问题: 命令面板 > "Fix all auto-fixable Problems"

注意事项

格式化器和 Lint 工具可能冲突，需要合理配置
大型项目中格式化可能影响性能
团队协作时应统一配置
定期更新格式化器和 Lint 工具
使用配置文件确保一致性