vscode 格式化代码配置

推荐安装[Prettier]

pretter没有对代码的质量进行检查的能力，只关注格式化，并不具有eslint检查语法等能力，其只会对代码风格按照指定的规范进行统一，避免一个项目中出现多种不同的代码风格

安装插件ESlint，打开扩展，搜索prettier，找到Prettier-Code formatter并安装

文件->首选项->设置进入设置界面，可以在搜索框中搜索要配置的文件进行勾选，但是只有基本配置项

settings.json配置如下，配置时候注意，Eslint和Prettier配置的规则要一致，否则会有冲突

 {        
   /*配置html css js的默认格式化程序*/  
  "editor.defaultFormatter": "esbenp.prettier-vscode",
   /*配置prettier*/
   "prettier.printWidth": 120, // 超过最大值换行
   "prettier.tabWidth": 4, // 缩进字节数
   "prettier.useTabs": true, // 缩进使用tab，不使用空格
   "prettier.semi": true, // 句尾添加分号
   "prettier.singleQuote": true, // 使用单引号代替双引号
   "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
   "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
   "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
   "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
   "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
   "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
   "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
   "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
   "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
   "prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验
    }

（3）其他配置

可以根据自己的喜好配置

 {
   /*配置编辑器 看个人习惯配置*/
   "editor.formatOnPaste": true,// 粘贴时格式化代码
   "editor.formatOnSave": true,// 每次保存的时候将代码按格式进行修复
   "editor.detectIndentation": false, // vscode默认启用了根据文件类型自动设置tabsize的选项
   "editor.tabSize": 2, // 重新设定tabsize,根据自己的习惯
   "editor.detectIndentation": false,
   "editor.insertSpaces": false,//tab时不插入空格
   "editor.formatOnType": true //开启自动格式化
     
    /*配置js*/
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,//  #让函数(名)和后面的括号之间加个空格
   "javascript.format.insertSpaceAfterConstructor": true,// 在构造函数和括号之间加空格
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
   "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
   "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
   "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,// 在二进制运算符之后定义空间处理。
            
   /*css的一些校验 可加可不加*/
   "css.lint.float": "warning",
   "css.lint.idSelector": "warning",
   "css.lint.important": "warning",
   "css.lint.importStatement": "error",
   "css.lint.universalSelector": "warning",
   "less.lint.float": "warning",
   "scss.lint.idSelector": "warning",
   "scss.lint.hexColorLength": "warning",
   "scss.lint.float": "warning",
   "scss.lint.importStatement": "warning",
   "scss.lint.universalSelector": "warning",
 }