How to configure VS Code code formatting?

VS Code Code Formatting and Lint Integration

VS Code provides powerful code formatting and Lint integration features, helping maintain code style consistency and code quality.

Code Formatting

Built-in Formatters

VS Code has built-in support for formatters in multiple languages:

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

Formatting Operations

• Format Document: Shift+Alt+F
• Format Selection: Ctrl+K, Ctrl+F
• Format on Save: Configure auto-formatting

Formatting Configuration

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

Prettier Integration

Installing Prettier

bash
npm install --save-dev prettier

Configuring Prettier

Create .prettierrc file:

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

VS Code Configuration

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

ESLint Integration

Installing ESLint

bash
npm install --save-dev eslint

Configuring ESLint

Create .eslintrc.js file:

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 Configuration

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

Stylelint Integration

Installing Stylelint

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

Configuring Stylelint

Create .stylelintrc.json file:

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

VS Code Configuration

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

Multi-formatter Configuration

Language-specific Formatters

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

Formatter Priority

1. Language-specific formatter
2. Default formatter
3. Built-in formatter

Code Formatting Rules

Formatting Rule Configuration

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

TypeScript Formatting Rules

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

Lint Error Display

Error Levels

• Error: Serious error, must be fixed
• Warning: Warning, recommended to fix
• Info: Information, for reference only
• Hint: Hint, helps improve

Error Navigation

• F8: Jump to next error
• Shift+F8: Jump to previous error
• Ctrl+Shift+M: Show problems panel

Auto-fix

Auto-fix on Save

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

Manual Fix

• Quick Fix: Ctrl+.
• Fix All Auto-fixable Problems: Command palette > "Fix all auto-fixable Problems"

Important Notes

• Formatters and Lint tools may conflict, need reasonable configuration
• Formatting may affect performance in large projects
• Team collaboration should unify configuration
• Regularly update formatters and Lint tools
• Use configuration files to ensure consistency