2020-10-29

VSCODE 的代码格式化

一、安装以下几个 vscode 扩展程序：

• ESLint
• Prettier - Code formatter
• Vetur

二、打开 settings 文件

打开方式：

先按步骤打开 setting 界面，
Code --> preferences -->setting （文件-->首选项-->设置-->右上角）

现在看到的是界面配置模式，点击右上角的红色区域按钮（如下图），可以打开 settings.json 文件。

三、将下面配置添加到 setting.json 文件中

注： 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考，然后结合自己的需求去配置。
如果没有特殊需求，也可以拿去直接用。 两份配置，复制其中一份即可！！！

{
  /*格式化文件对应插件：
   主要是两步，一步是用格式化插件格式化对应的文件；
   另一步让格式化后的代码能通过代码检验工具。
   prettyhtml格式化HTML；prettier格式化css/less/scss/postcss/ts；
   stylus-supremacy格式化stylus；
   vscode自带格式化插件格式化js；
   vetur格式化.vue文件；
   ESlint进行代码检验。
   */

  /*格式化思路和注意事项。
   注意格式化的代码能符合ESlint代码检验。
   1.用vetur设置默认格式化工具。格式化.vue文件
   2.用ESlint设置保存时修复ESlint错误的功能。
   3.用prettier格式化css；去除语法结尾的分号，使用单引号替换双引号。
   4.保存时自动格式化。
   */

  // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  // "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "open-in-browser.default": "Chrome",

  // 将vetur的js格式化工具指定为vscode自带的
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 移除js语句的分号
  "javascript.format.semicolons": "remove",
  // 在函数名后面加上括号，类似这种形式 foo () {}
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

  // eslint配置项，保存时自动修复错误。
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

  // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 指定 *.js 文件的格式化工具为vscode自带
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

  "vetur.format.defaultFormatterOptions": {
    "JS-beautify-HTML": {
      // JS-beautify-HTML的设置在这里
      "wrap_attributes": "force-aligned"
    },
    " prettyhtml": {
      "printWidth'": 100, // 每一行不超过100个字符
      "singleQuote": false, // 不用单引号
      "wrapAttributes": false,
      "sortAttributes": true
    },
    "prettier": {
      // 去掉代码结尾的分号
      "semi": false, //不加分号
      "singleQuote": true, //用单引号
      // #让prettier使用eslint的代码格式进行校验
      "eslintIntegration": true,
      "arrowParens": "always"
    }
  },

  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 4,

  // 保存时自动格式化代码
  "editor.formatOnSave": false,

  //可选项。stylus的格式化配置以及sass格式化配置。
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  // 启用调试模式。
  "sass.format.debug": false,
  // 删除空格
  "sass.format.deleteEmptyRows": true,
  // 删除最后一个空格。
  "sass.format.deleteWhitespace": true,
  // 将 scss / css 转换为 sass。
  "sass.format.convert": true,
  // 如果 属性:值 为true,则始终设置为1.
  "sass.format.setPropertySpace": true

  /*格式化插件：
   //vetur：代码高亮、emmet语法支持、语法错误校验检查、代码提醒、格式化vue。
   vetur集成了prettier，让.vue文件中不同的块使用不同的格式化方案，
   <template> 调用 html 格式化工具，
   <script> 调用 JavaScript 格式化工具，
   <style> 使用style格式化工具。
    
   //ESlint：新版的ESlint支持了对.vue文件的校验。
    
   //prettyhtml：为纯HTML模板等提供通用格式化的工具。
   //prettier：格式化工具，用于css/less/scss/postcss/ts
   //stylus-supremacy：用于格式化stylus文件的node.js模块。
   //js的格式化工具用vscode自带的。
   Prettier不支持在函数名后面加上括号。这点和ESlint冲突了。
    
   //EditorConfig：主要是用于让 vscode 支持.editorconfig 文件。
   .editorconfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置，
   例如缩进样式、选项卡宽度、行尾字符以及编码等。
   EditorConfig 是让代码创建前保持规范，
   Prettier 是让代码保存后保持规范
   */
}

 

{
	// vscode默认启用了根据文件类型自动设置tabsize的选项
	"editor.detectIndentation": false,
	// 重新设定tabsize
	"editor.tabSize": 4,
	// #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
	"editor.formatOnSave": false,
	// #每次保存的时候将代码按eslint格式进行修复
	"eslint.autoFixOnSave": true,
	// 添加 vue 支持
	// "eslint.validate": [
	// 	"javascript",
	// 	"javascriptreact",
	// 	{
	// 		"language": "vue",
	// 		"autoFix": true
	// 	}
	// ],
	//  #让prettier使用eslint的代码格式进行校验
	// "prettier.eslintIntegration": true,
	//  #去掉代码结尾的分号
	"prettier.semi": false,
	//  #使用带引号替代双引号
	"prettier.singleQuote": true,
	"prettier.tabWidth": 4,
	//  #让函数(名)和后面的括号之间加个空格
	"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
	// #这个按用户自身习惯选择
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	// #让vue中的js按"prettier"格式进行格式化
	"vetur.format.defaultFormatter.js": "prettier", //vscode-typescript
	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			// #vue组件中html代码格式化样式
			"wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
			"wrap_line_length": 200,
			"end_with_newline": false,
			"semi": false,
			"singleQuote": true
		},
		"prettier": {
			"semi": false,
			"singleQuote": true
		},
		"prettyhtml": {
			"printWidth": 200,
			"singleQuote": false,
			"wrapAttributes": false,
			"sortAttributes": false
		}
	},
	"[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": "afterDelay",
	"explorer.confirmDelete": false,
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"diffEditor.ignoreTrimWhitespace": false, // 两个选择器中是否换行
	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"files.associations": {
		"*.cjson": "jsonc",
		"*.wxss": "css",
		"*.wxs": "javascript"
	},
	"emmet.includeLanguages": {
		"wxml": "html"
	},
	"minapp-vscode.disableAutoConfig": true,
	// 保存时用eslint格式化
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	// 保存时使用VSCode 自身格式化程序格式化
	// "editor.formatOnSave": true,
	// 两者会在格式化js时冲突，所以需要关闭默认js格式化程序
	// "javascript.format.enable": false
}

保存配置，现在就搞定了，快试试是不是可以保存格式化代码了。

四、eslint 和 prettier 的区别

1、 eslint

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

这里我们先对 eslint 做对应的配置

 // 保存时格式化
  "editor.formatOnSave": true,
  // 设置 eslint 保存时自动修复
  "eslint.autoFixOnSave": true,

2、prettier

prettier 本身就是用来做代码格式化的，准确的说它是来美化代码的，所以这方面有更大的优势。同时 prettier 也是对 eslint 格式化的基础上的一个极好的补充。

那么两者都有格式化的功能，就不会有冲突吗？

当然有了，不过只要简单的配置就可以解决了，比如语句末尾不加分号和强制单引号等 eslint 风格检查。配置如下：

// prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,

还有个冲突就是匿名函数后空格的问题。 function () （eslint 推荐）和 function() （prettier 推荐） 的冲突。我们后面继续说这个问题。下面来看对 vue 文件格式化的配置。

五、vue 文件格式化配置（Vetur 配置）

vscode 对 vue 的支持也是很棒的。对于 vue 的格式化，我们用到了 Vetur 插件，Vetur 插件的格式化大多也是直接用的 prettier 规范。这也是我们选择 prettier 格式化代码的原因之一。

Vetur 的格式化配置只需修改关于模版的部分就好了。

 // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",

用 prettyhtml 格式化 template 可以消除多余的空行，并且对属性超长的行可以合理换行显示。

六、问题

1、vue 文件和 html 文件，没有 eslint 风格提示。

解决方法： 在 setting.json 文件中加入如下配置：

// eslint 检测文件类型
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ]

2、 function () （eslint 推荐）和 function() （prettier 推荐） 的风格冲突问题

上面提到过这个问题，这里来说说我自己的处理方法，大家可以参考。

如果推崇 eslint 的规范，也就是 function () 这种的。那么恭喜你，你什么都不用改。

如果你推崇 prettier 的规范，也就是 function() 这种的。那么就需要改改了。

先把 setting.json 中 eslint.validate 字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候，走
prettier 的规范，而不再需要根据 eslint 的规范，进行 fix。

这样做有个好处是，如果你的项目不需要配置 eslint 来检查代码 ，代码就不需要格式化为 eslint 的规范。

{
    "language": "vue"
    // "autoFix": true
 }

但是如果你的项目配置了 eslint ，比如用 vue-cli 构建的项目，一般都会进行 eslint 检查。那么就在项目根目录的 eslintrc.js 中添加下面的配置，这种情况就可以 autoFix 了，自动修复成 eslint 的规范。

// 自定义的规则
module.exports = {
  rules: {
    'space-before-function-paren': 0
  }
}

---

本文转载于：https://blog.youkuaiyun.com/userkang/article/details/84305689