VS Code 开发统一代码格式化配置

最新推荐文章于 2026-05-14 09:28:31 发布

原创最新推荐文章于 2026-05-14 09:28:31 发布 · 252 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #开发语言 #ecmascript #前端

JS 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了VSCode的个性化配置，包括使用eslint和prettier提升代码风格和质量，自动修复与格式化设置，以及vue文件的格式化规则。同时分享了个人的配置示例，如缩进、自动格式化、文件搜索与排除、代码提示等功能，并推荐了一些实用插件，如ViewInBrowser、BracketPairColorizer等，以提升开发效率。

eslint: 是用来做代码风格检查的，比较关注代码质量，并且会提示不符合风格规范的代码，也有一部分代码格式化的功能。不是消除空行。

"editor.formatOnSave":  false, // true 每次保存时自动格式化；false 代码格式化 shift+alt+F
 "eslint.autoFixOnSave":  true,  // 设置保存时自动修复  
 "eslint.validate": ["vue","html","javascript","typescript"] // 配置eslint对 vue文件及html文件的 风格提示

prettier :本身是用来做代码格式化的，可以补充eslint 的缺陷

"prettier.semi": false, // 去掉代码结尾的分号  
 "prettier.singleQuote": true, // 设置强制单引号

vue文件格式化配置 (Vetur) 该插件大多是直接使用的 prettier 规范。

"[vue]": {
    "editor.defaultFormatter": "octref.vetur"   // vue 格式化
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          "wrap_attributes": "auto"   // html 标签属性 换行设置不换行
      }
  },

个人配置：

{
  // ... 原有配置
   "editor.minimap.enabled": false, // 控制是否显示缩略图
    "git.autorefresh": true, // git 工作空间刷新
    "breadcrumbs.enabled": true, // 开启vscode 文件路径导航
    "editor.tabSize": 4, //配置代码缩进为 一个tab = 4个空格  
    "editor.detectIndentation": false, // vscode 默认启用了根据文件类型自动设置tabsize的选项
    "editor.formatOnSave": true, // true 每次保存时自动格式化；false 代码格式化 shift+alt+F
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur" // vue 格式化
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto" // html 标签属性 换行设置不换行
        }
    },
    "prettier.printWidth": 300, // 超过最大值换行
    "search.exclude": {
        "**/node_modules": true // 全文搜索功能快速排出文件/文件夹
    },
    "files.exclude": { // 这些文件将不会显示在工作空间中
        "**/.DS_Store": true,
        "**/.gitignore": true,
        "**/node_modules": true
    },
    "search.followSymlinks": false, // CPU利用率100%的情况
    "editor.tabCompletion": "on", // 出现推荐值时，按下Tab键是否自动填入最佳推荐值
    "editor.lineNumbers": "on", // 显示左侧代码行数
    "explorer.confirmDelete": true, // 控制资源管理器 删除文件时，是否进行确认
    "workbench.sideBar.location": "left", // 控制侧边栏的位置
    "editor.largeFileOptimizations": false, // 对大型文件进行特殊处理，禁用某些内存密集型功能
}

VS code 插件:

View In Browser：在浏览器里预览网页必备。运行html文件Bracket Pair Colorizer：给嵌套的各种括号加上不同的颜色。Auto Rename Tag ：自动修改匹配的 HTML 标签。Path Intellisense：智能路径提示，可以在你输入文件路径时智能提示。Turbo Console Log：快捷添加 console.log ctrl + alt + lcss-auto-prefix：自动添加 CSS 私有前缀。vscode-json ：处理 JSON 文件Regex Previewer：实时预览正则表达式的效果。Image Preview：快速预览HTML中的图片VS Code Counter：查看代码