vscode eslint格式化配置问题

最新推荐文章于 2025-11-04 21:29:11 发布

原创最新推荐文章于 2025-11-04 21:29:11 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

eslint 同时被 3 个专栏收录

1 篇文章

订阅专栏

代码格式化

1 篇文章

订阅专栏

vscode

1 篇文章

订阅专栏

本文详细介绍了如何在Visual Studio Code(VSCode)中配置自动格式化代码的设置，包括设置tabSize、formatOnSave、eslint、prettier、vetur等插件的选项，以及针对不同语言如JavaScript、Vue、HTML、CSS的格式化规则。通过这些配置，开发者可以在保存代码时实现自动格式化，提升代码风格的一致性和可读性。

在使用vscode编辑代码保存后，自动格式化代码。
主要配置如下，但可能有其他插件会影响格式化效果，建议谨慎安装相关格式化插件：

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
  "editor.formatOnSave": false,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
          "language": "vue",
          "autoFix": true
      },
      {
          "language": "html",
          "autoFix": true
      },
      {
          "language": "css",
          "autoFix": true
      }
  ],
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  "prettier.tabWidth": 4,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          // #vue组件中html代码格式化样式
          "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
          "wrap_line_length": 200,
          "end_with_newline": false,
          "semi": false,
          "singleQuote": true
      },
      "prettier": {
          "semi": false,
          "singleQuote": true
      }
  },
  "[jsonc]": {
      "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "prettier.useTabs": true,
  "files.autoSave": "off",
  "explorer.confirmDelete": false,
  "[javascript]": {
      "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.codeActionsOnSave": {
  	// 编辑保存后自动格式化代码
      "source.fixAll.eslint": true
  },
  "[html]": {
      "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
  },
  "window.zoomLevel": 1,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  } // 两个选择器中是否换行
}