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

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 + l

css-auto-prefix： 自动添加 CSS 私有前缀。

vscode-json ： 处理 JSON 文件

Regex Previewer： 实时预览正则表达式的效果。

Image Preview：快速预览HTML中的图片

VS Code Counter： 查看代码