保存代碼時格式化代碼風格

時間 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格式化代碼的全部方式提供配置設置，並且優先級最高。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。