vscode代码格式化配置

最新推荐文章于 2025-11-03 16:29:40 发布

原创最新推荐文章于 2025-11-03 16:29:40 发布 · 4.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #javascript

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

vscode

1 篇文章

订阅专栏

本文分享了一套针对VSCode的代码格式化配置方案，详细介绍了如何设置代码间距、自动格式化、 ESLint验证及Prettier集成，适用于JavaScript、Vue等语言。

这个是我个人比较喜欢的代码自动格式化配置,代码间距以两个空格为标准,自动去除所有的分号等,配置位置在设置的settings.json中,

下面的代码直接复制替换就行

{

  // vscode默认启用了根据文件类型自动设置tabsize的选项

  "editor.detectIndentation": false,

  // 重新设定tabsize

  "editor.tabSize": 2,

  // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F

  "editor.formatOnSave": true,

  // #每次保存的时候将代码按eslint格式进行修复

  "eslint.autoFixOnSave": false,

  // 添加 vue 支持

  "eslint.validate": [

    "javascript",

    "javascriptreact",

    {

      "language": "vue",

      "autoFix": true

    }

  ],

  //  #让prettier使用eslint的代码格式进行校验

  "prettier.eslintIntegration": true,

  //  #去掉代码结尾的分号

  "prettier.semi": true,

  //  #使用单引号替代双引号

  "prettier.singleQuote": true,

  "prettier.tabWidth": 2,

  //  #让函数(名)和后面的括号之间加个空格

  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  // #这个按用户自身习惯选择

  "vetur.format.defaultFormatter.html": "js-beautify-html",

  // #让vue中的js按"prettier"格式进行格式化

  "vetur.format.defaultFormatter.js": "prettier-eslint",

  "vetur.format.defaultFormatterOptions": {

    "js-beautify-html": {

      // #vue组件中html代码格式化样式

      "wrap_attributes": "auto", //也可以设置为“force-aligned”，效果会不一样

      "wrap_line_length": 400,

      "end_with_newline": false,

      "semi": false,

      "singleQuote": true

    },

    "prettier": {

      "semi": false,

      "singleQuote": true

    },

    "prettier.trailingComma": "none"

  },

  "[jsonc]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  // 格式化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": "esbenp.prettier-vscode"

  },

  "[json]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "diffEditor.ignoreTrimWhitespace": false // 两个选择器中是否换行

}