儲存程式碼時格式化程式碼風格
阿新 • • 發佈：2018-12-09
儲存時格式化程式碼風格
在使用VSCode時，我們經常會利用一些工具來幫我們做一些事情，比如統一團隊成員的程式碼風格。
下面列舉幾種可以在儲存檔案時按照固定的程式碼風格格式化檔案的方法
- 使用Formatting
- 使用lintOnSave
- 使用ESlint外掛
VSCode中的Editor預設提供了基本的程式碼格式化功能, 可以通過editor.formatOnSave來開啟在儲存時格式化檔案。
Editor中預設支援配置的語言有以下：
- HTML
- JSON
- Markdown
- PHP
- TypeScript
- CSS
- LESS
- SCSS (Sass)
這些語言格式化的配置都可以很容易在setting
來看一下html的預設配置
{ // 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"配置項來把一個副檔名結尾的檔案與一種程式語言（需要安裝對應的語言外掛擴充套件）建立起關聯
比如：
"files.associations": {
"*.vue": "vue" // 把以.vue結尾的檔案和vue的語言關聯起來
}在VueCLI3腳手架專案中可以通過專案的自定義配置檔案vue.config.js來開啟
// vue.config.js module.exports = { lintOnSave: true // default false }
yarn add eslint-loader @vue/cli-plugin-eslint -D這倆個包都允許你指定一定的規則去格式化程式碼,下面我們來做一些簡單的引導。
配置規則
- 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格式化程式碼的所有方式提供配置設定，而且優先順序最高。