保存代码时格式化代码风格

时间 2019-12-05

标签保存代码格式化风格繁體版

原文原文链接

保存时格式化代码风格

在使用VSCode时，咱们常常会利用一些工具来帮咱们作一些事情，好比统一团队成员的代码风格。javascript

下面列举几种能够在保存文件时按照固定的代码风格格式化文件的方法

使用Formatting
使用lintOnSave
使用ESlint插件

使用Formatting

VSCode中的Editor默认提供了基本的代码格式化功能, 能够经过editor.formatOnSave来开启在保存时格式化文件。html

Editor中默认支持配置的语言有如下：vue

HTML
JSON
Markdown
PHP
TypeScript
CSS
LESS
SCSS (Sass)

这些语言格式化的配置均可以很容易在setting中找到，并经过User Setting来修改，而且能够经过安装插件的形式支持其余语言的格式化处理.html5

来看一下html的默认配置java

{
  // Enable/disable autoclosing of HTML tags.
  "html.autoClosingTags": true,

  // List of tags, comma separated, where the content shouldn't be reformatted. 'null' defaults to the 'pre' tag.
  "html.format.contentUnformatted": "pre,code,textarea",

  // Enable/disable default HTML formatter.
  "html.format.enable": true,

  // End with a newline.
  "html.format.endWithNewline": false,

  // List of tags, comma separated, that should have an extra newline before them. 'null' defaults to "head, body, /html".
  "html.format.extraLiners": "head, body, /html",

  // Format and indent {{#foo}} and {{/foo}}.
  "html.format.indentHandlebars": false,

  // Indent <head> and <body> sections.
  "html.format.indentInnerHtml": false,

  // Maximum number of line breaks to be preserved in one chunk. Use 'null' for unlimited.
  "html.format.maxPreserveNewLines": null,

  // Controls whether existing line breaks before elements should be preserved. Only works before elements, not inside tags or for text.
  "html.format.preserveNewLines": true,

  // List of tags, comma separated, that shouldn't be reformatted. 'null' defaults to all tags listed at https://www.w3.org/TR/html5/dom.html#phrasing-content.
  "html.format.unformatted": "wbr",

  // Wrap attributes.
  //  - auto: Wrap attributes only when line length is exceeded.
  //  - force: Wrap each attribute except first.
  //  - force-aligned: Wrap each attribute except first and keep aligned.
  //  - force-expand-multiline: Wrap each attribute.
  //  - aligned-multiple: Wrap when line length is exceeded, align attributes vertically.
  "html.format.wrapAttributes": "auto",

  // Maximum amount of characters per line (0 = disable).
  "html.format.wrapLineLength": 120,

  // Controls whether the built-in HTML language support suggests Angular V1 tags and properties.
  "html.suggest.angular1": false,

  // Controls whether the built-in HTML language support suggests HTML5 tags, properties and values.
  "html.suggest.html5": true,

  // Controls whether the built-in HTML language support suggests Ionic tags, properties and values.
  "html.suggest.ionic": false,

  // Traces the communication between VS Code and the HTML language server.
  "html.trace.server": "off",

  // Controls whether the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,

  // Controls whether the built-in HTML language support validates embedded styles.
  "html.validate.styles": true,
}

通常状况下，当你须要VSCode对某种程序语言的支持高亮，格式化等只须要安装相关插件便可，插件就会对文件进行关联，若是咱们想要对一些特殊格式文件进行关联已有的语言，
咱们可使用"files.associations"配置项来把一个扩展名结尾的文件与一种程序语言（须要安装对应的语言插件扩展）创建起关联node

好比：react

"files.associations": {
  "*.vue": "vue" // 把以.vue结尾的文件和vue的语言关联起来
}

使用lintOnSave

在VueCLI3脚手架项目中能够经过项目的自定义配置文件vue.config.js来开启webpack

// vue.config.js
module.exports = {
  lintOnSave: true // default false
}

使用该配置选项开启保存时格式化代码文件，须要安装开发依赖 eslint-loader 和 @vue/cli-plugin-eslint 俩个git

yarn add eslint-loader @vue/cli-plugin-eslint -D

这俩个包都容许你指定必定的规则去格式化代码,下面咱们来作一些简单的引导。github

配置规则

eslint-loader

经过eslint-loader能够在webpack的打包规则中对js文件进行检查：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "eslint-loader",
  options: {
    // eslint options (if necessary)
    emitError: true, // 以错误的形式显示
    emitWarning: true, // 以警告的形式提示
    quiet: true, // 仅仅显示错误，忽略警告
    failOnWarning: true, //警告会致使编译失败
  }
}

@vue/cli-plugin-eslint

该插件配置代码格式经过 .eslintrc 文件或者 package.json 中的 eslintConfig 项来进行指定eslint的配置。
默认状况使用codeframe这个formatter来格式化代码和提示错误，

使用ESlint

按照下面几个步骤

安装VSCode的ESlint扩展

全局安装或者项目安装eslint

# 在项目中安装
  npm install eslint

  # 全局安装
  npm install -g eslint

VSCode中Settings里面找到ESlint的配置eslint.autoFixOnSave 设置为true
使用配置eslint.nodePath设置node环境（mac下可使用 which node 查看node的位置, windows的话找到node的安装位置，复制路径字符串到该配置）

更改配置"eslint.validate"的值为

"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "html", "autoFix": true },
  { "language": "vue", "autoFix": true}
]

安装vetur扩展

值得一提的是，.eslintrc文件能够为依赖eslint格式化代码的全部方式提供配置设置，并且优先级最高。