VSCode开发Vue推荐配置

1、安装插件

1.1 ESLint （ESLint语法检查工具）

1.2 Prettier（格式化工具）

1.3 Vetur（Vue开发必备插件，高亮，格式化等）

 1.4 图标集（为了文件图标好看）

1.5 Vue常用代码块

1.6 前端简易服务器（让html能以服务器模式运行）

2、配置settings.json文件

{
  "workbench.iconTheme": "vscode-icons",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 输入后格式化
  "editor.formatOnType": true,
  // 粘贴时格式化
  "editor.formatOnPaste": true,
  // 编辑器字体大小
  "editor.fontSize": 20,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  "vsicons.dontShowNewVersionMessage": true,
  // 保存后自动修复格式
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // eslint语法校验的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  /***********************  prettier的配置 start ***********************/
  // 让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // 去掉代码结尾的分号
  "prettier.semi": false,
  // 使用单引号替代双引号
  "prettier.singleQuote": true,
  // prettier- (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.arrowParens": "avoid",
  //  prettier-在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.bracketSpacing": true,
  // --------------------------格式化支持的文件后缀----------------------------
  // vue文件交给vetur插件格式化
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  /***********************  prettier的配置 end ***********************/

  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "vetur.format.scriptInitialIndent": true, // js部分是否有初始缩进
  "vetur.format.styleInitialIndent": true, // css部分是否有初始缩进
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false,
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // JS统一用prettier来格式
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.sass": "sass-formatter",

  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 100, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      "semi": false, // 是否在每行末尾添加分号
      "singleQuote": true // 使用单引号
    },
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple", // 属性折行对齐方式
      "wrap_attributes_mode": "auto",
      "wrap-line-length": 95,
      "wrapped_attributes_per_line": "multiple",
      "wrapped_attributes_indent": "auto",
      "wrapped_attributes_end": "auto",
      "end_with_newline": false
    }
  },
  "terminal.integrated.defaultProfile.windows": "Command Prompt"
}