建站
咨詢
售后
建站咨詢
新聞中心
最近遇到了一個老項目，比較有意思的是這個項目集前后端的代碼于一起，而后端也會去修改前端代碼，所以就出現(xiàn)了后端用 IntelliJ IDEA 來開發(fā)前端項目，而前端用 VSCode 來開發(fā)前端項目的情況。于是乎，出現(xiàn)了代碼規(guī)范的問題，所以就有了這篇文章，整理了一下前端代碼校驗以及在 Vue 項目中的實踐。
創(chuàng)新互聯(lián)公司專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、嘉興網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為嘉興等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
閱讀完這篇文章，你可以收獲：
- 能夠自己親手寫出一套 ESLint 配置;
- 會知道業(yè)界都有哪些著名的 JS 代碼規(guī)范，熟讀它們可以讓你寫出更規(guī)范的代碼;
- vue-cli 在初始化一個包含代碼校驗的項目時都做了什么;
- Prettier 是什么?為什么要使用它?如何與 ESLint 配合使用?
- EditorConfig 又是什么?如何使用?
- 如何在 VSCode 中通過插件來協(xié)助代碼校驗工作;
- 如何保證 push 到遠(yuǎn)程倉庫的代碼是符合規(guī)范的;
下面開始閱讀吧，如果你對 ESLint 比較熟悉，可以直接跳過這個部分。
ESLint 是什么
ESLint 是一個集代碼審查和修復(fù)的工具，它的核心功能是通過配置一個個規(guī)則來限制代碼的合法性和風(fēng)格。
配置解析器和解析參數(shù)
ESLint 的解析器，早期的時候用的是 Esprima[1]，后面基于 Esprima v1.2.2 版本開發(fā)了一個新的解析器 Espree[2]，并且把它當(dāng)做默認(rèn)解析器。
除了使用 ESLint 自帶的解析器外，還可以指定其他解析器：
- @babel/eslint-parser[3]：使 Babel 和 ESLint 兼容，對一些 Babel 語法提供支持;
- @typescript-eslint/parser[4]：TSLint 被棄用后，TypeScript 提供了此解析器用于將其與 ESTree 兼容，使 ESLint 對 TypeScript 進(jìn)行支持;
為項目指定某個選擇器的原則是什么?
- 如果你的項目用到了比較新的 ES 語法，比如 ES2021 的 Promise.any()，那就可以指定 @babel/eslint-parser 為解析器;
- 如果項目是基于 TS 開發(fā)的，那就使用 @typescript-eslint/parser;
“如果你對 ES 最新標(biāo)準(zhǔn)還不熟悉，可以看看這篇文章：送你一份精心總結(jié)的3萬字ES6實用指南(下)
除了指定解析器 parser 外，還可以額外配置解析器參數(shù) parserOption：
- {
- // ESLint 默認(rèn)解析器，也可以指定成別的
- parser: "espree",
- parserOption: {
- // 指定要使用的 ECMAScript 版本，默認(rèn)值 5
- ecmaVersion: 5,
- // 設(shè)置為 script (默認(rèn)) 或 module（如果你的代碼是 ECMAScript 模塊)
- sourceType: "script",
- // 這是個對象，表示你想使用的額外的語言特性,所有選項默認(rèn)都是 false
- ecmafeatures: {
- // 是否允許在全局作用域下使用 return 語句
- globalReturn: false,
- // 是否啟用全局 strict 模式（嚴(yán)格模式）
- impliedStrict: false,
- // 是否啟用JSX
- jsx: false,
- // 是否啟用對實驗性的objectRest/spreadProperties的支持
- experimentalObjectRestSpread: false
- }
- }
- }
指定環(huán)境 env
指定不同的環(huán)境可以給對應(yīng)環(huán)境下提供預(yù)設(shè)的全局變量。比如說在 browser 環(huán)境下，可以使用 window 全局變量;在 node 環(huán)境下，可以使用 process 全局變量等;
- ESLint 中可配置的環(huán)境比較多，這里有份完整的環(huán)境列表[5]，下面列出幾個比較常見的：
- browser：瀏覽器全局變量;
- node：Node.js 全局變量和作用域;
- es6：es6 中除了模塊之外的其他特性，同時將自動設(shè)置 parserOptions.ecmaVersion 參數(shù)為 6;以此類推 ES2017 是 7，而 ES2021 是 12;
- es2017：parserOptions.ecmaVersion 為 8;
- es2020：parserOptions.ecmaVersion 為 11;
- es2021：parserOptions.ecmaVersion 為 12;
配置方式如下：
- {
- env: {
- browser: true,
- node: true,
- es6: true,
- commonjs: true,
- mocha: true,
- jquery: true,
- }
- }
可以指定多個環(huán)境并不意味著配置的環(huán)境越多越好，實際配置的時候還是得依據(jù)當(dāng)前項目的環(huán)境來選擇。
配置全局變量 globals
ESLint 的一些核心規(guī)則依賴于對代碼在運行時可用的全局變量的了解。由于這些在不同環(huán)境之間可能會有很大差異，并且在運行時會進(jìn)行修改，因此 ESLint 不會假設(shè)你的執(zhí)行環(huán)境中存在哪些全局變量。
如果你想使用這些全局變量，那就可以通過 globals 來指定。比如在 react .eslintrc.js[6] 里就把 spyOnDev、 spyOnProd 等變量掛在了 global 下作為全局變量：
- {
- globals: {
- spyOnDev: true,
- spyOnProd: true,
- }
- }
對于它的值需要特別說明下：
- false、readable、readonly 這 3 個是等價的，表示變量只可讀不可寫;
- true、writeable、writable 這 3 個是等價的，表示變量可讀可寫;
配置擴(kuò)展 extends
實際項目中配置規(guī)則的時候，不可能團(tuán)隊一條一條的去商議配置，太費精力了。通常的做法是使用業(yè)內(nèi)大家普通使用的、遵循的編碼規(guī)范;然后通過 extends 去引入這些規(guī)范。extends 配置的時候接受字符串或者數(shù)組：
- {
- extends: [
- 'eslint:recommended',
- 'plugin:vue/essential',
- 'eslint-config-standard', // 可以縮寫成 'standard'
- '@vue/prettier',
- './node_modules/coding-standard/.eslintrc-es6'
- ]
- }
從上面的配置，可以知道 extends 支持的配置類型可以是以下幾種
- eslint 開頭的：是 ESLint 官方的擴(kuò)展;
- plugin 開頭的：是插件類型擴(kuò)展，比如 plugin:vue/essential;
- eslint-config 開頭的：來自 npm 包，使用時可以省略前綴 eslint-config-，比如上面的可以直接寫成 standard;
- @開頭的：擴(kuò)展和 eslint-config 一樣，只是在 npm 包上面加了一層作用域 scope;
- 一個執(zhí)行配置文件的相對路徑或絕對路徑;
那有哪些常用的、比較著名擴(kuò)展可以被 extends 引入呢
- eslint:recommended：ESLint 內(nèi)置的推薦規(guī)則，即 ESLint Rules 列表中打了鉤的那些規(guī)則;
- eslint:all：ESLint 內(nèi)置的所有規(guī)則;
- eslint-config-standard[7]：standard 的 JS 規(guī)范;
- eslint-config-prettier[8]：關(guān)閉和 ESLint 中以及其他擴(kuò)展中有沖突的規(guī)則;
- eslint-config-airbnb-base：airbab 的 JS 規(guī)范;
- eslint-config-alloy[9]：騰訊 AlloyTeam 前端團(tuán)隊出品，可以很好的針對你項目的技術(shù)棧進(jìn)行配置選擇，比如可以選 React、Vue(現(xiàn)已支持 Vue 3.0)、TypeScript 等;
使用插件 plugins
ESLint 提供插件是干嘛用的
ESLint 雖然可以定義很多的 rules，以及通過 extends 來引入更多的規(guī)則，但是說到底只是檢查 JS 語法。如果需要檢查 Vue 中的 template 或者 React 中的 jsx，就束手無策了。所以引入插件的目的就是為了增強(qiáng) ESLint 的檢查能力和范圍。
如何配置插件
ESLint 相關(guān)的插件的命名形式有 2 種：不帶命名空間的和帶命名空間的，比如：
- eslint-plugin- 開頭的可以省略這部分前綴;
- @/ 開頭的;
- {
- plugins: [
- 'jquery', // 是指 eslint-plugin-jquery
- '@jquery/jquery', // 是指 @jquery/eslint-plugin-jquery
- '@foobar', // 是指 @foobar/eslint-plugin
- ]
- }
當(dāng)需要基于插件進(jìn)行 extends 和 rules 的配置的時候，需要加上插件的引用，比如：
- {
- plugins: [
- 'jquery', // eslint-plugin-jquery
- '@foo/foo', // @foo/eslint-plugin-foo
- '@bar, // @bar/eslint-plugin
- ],
- extends: [
- 'plugin:jquery/recommended',
- 'plugin:@foo/foo/recommended',
- 'plugin:@bar/recommended'
- ],
- rules: {
- 'jquery/a-rule': 'error',
- '@foo/foo/some-rule': 'error',
- '@bar/another-rule': 'error'
- },
- }
以上配置來自 ESLint plugins[10]
配置規(guī)則 rules
ESLint 提供了大量內(nèi)置的規(guī)則，這里是它的規(guī)則列表 ESLint Rules，除此之外你還可以通過插件來添加更多的規(guī)則。
規(guī)則的校驗說明，有 3 個報錯等級
- off 或 0：關(guān)閉對該規(guī)則的校驗;
- warn 或 1：啟用規(guī)則，不滿足時拋出警告，且不會退出編譯進(jìn)程;
- error 或 2：啟用規(guī)則，不滿足時拋出錯誤，且會退出編譯進(jìn)程;
通常規(guī)則只需要配置開啟還是關(guān)閉即可;但是也有些規(guī)則可以傳入屬性，比如：
- {
- rules: {
- 'quotes': ['error', 'single'], // 如果不是單引號，則報錯
- 'one-var': ['error', {
- 'var': 'always', // 每個函數(shù)作用域中，只允許 1 個 var 聲明
- 'let': 'never', // 每個塊作用域中，允許多個 let 聲明
- 'const': 'never', // 每個塊作用域中，允許多個 const 聲明
- }]
- }
- }
如何知道某個擴(kuò)展有哪些規(guī)則可以配置，以及每個規(guī)則具體限制?這里直接給出業(yè)內(nèi)著名且使用比較多的規(guī)則列表的快速鏈接：
- ESLint rules，這整個列表對應(yīng) eslint:all，而打鉤 ? 的是 eslint:recommenmed;
- Prettier rules
- standard rules
- airbnb rules
- AlloyTeam vue rules
規(guī)則的優(yōu)先級
- 如果 extends 配置的是一個數(shù)組，那么最終會將所有規(guī)則項進(jìn)行合并，出現(xiàn)沖突的時候，后面的會覆蓋前面的;
- 通過 rules 單獨配置的規(guī)則優(yōu)先級比 extends 高;
其他配置
配置當(dāng)前目錄為 root
ESLint 檢測配置文件步驟：
- 在要檢測的文件同一目錄里尋找 .eslintrc.* 和 package.json;
- 緊接著在父級目錄里尋找，一直到文件系統(tǒng)的根目錄;
- 如果在前兩步發(fā)現(xiàn)有 root：true 的配置，停止在父級目錄中尋找 .eslintrc;
- 如果以上步驟都沒有找到，則回退到用戶主目錄 ~/.eslintrc 中自定義的默認(rèn)配置;
通常我們都習(xí)慣把 ESLint 配置文件放到項目根目錄，因此可以為了避免 ESLint 校驗的時候往父級目錄查找配置文件，所以需要在配置文件中加上 root: true。
- {
- root: true,
- }
添加共享數(shù)據(jù)
ESLint 支持在配置文件添加共享設(shè)置，你可以添加 settings 對象到配置文件，它將提供給每一個將被執(zhí)行的規(guī)則。如果你想添加的自定義規(guī)則而且使它們可以訪問到相同的信息，這將會很有用，并且很容易配置：
- {
- settings: {
- sharedData: 'Hello'
- },
- }
參考：ESLint配置文件.eslintrc參數(shù)說明[11]
針對個別文件設(shè)置新的檢查規(guī)則
比如 webpack 的中包含了某些運行時的 JS 文件，而這些文件是只跑在瀏覽器端的，所以需要針對這部分文件進(jìn)行差異化配置：
- overrides: [
- {
- files: ["lib/**/*.runtime.js", "hot/*.js"],
- env: {
- es6: false,
- browser: true
- },
- globals: {
- Promise: false
- },
- parserOptions: {
- ecmaVersion: 5
- }
- }
- ]
以上配置來自 webpack .eslintrc.js[12]
如何校驗
上面細(xì)說了 ESLint 的各種配置項，以及針對 Vue 項目如何進(jìn)行差異配置的說明。
現(xiàn)在我們知道了如何配置，但是你知道這些配置都是配置到哪里的嗎?
配置方式
ESLint 支持 3 種配置方式：
- 命令行：不推薦，不做介紹;
- 單文件內(nèi)注釋：不推薦，不做介紹;
- 配置文件：配置文件的類型可以是好幾種，比如：.js、.yml、json 等。推薦使用 .eslintrc.js;
下面通過命令來生成一個配置文件：
- # 安裝 eslint
- npm i eslint -D
- # 初始化一個配置文件
- npx eslint --init
最后會在當(dāng)前目錄生成一個 .eslintrc.js 文件。這里就不把代碼貼出來了，沒參考意義。
上面我們知道了可以將配置統(tǒng)一寫到一個配置文件里，但是你知道該如何去觸發(fā)這個配置文件的校驗規(guī)則嘛?
校驗單個文件
- // 校驗 a.js 和 b.js
- npx eslint a.js b.js
- // 校驗 src 和 scripts 目錄
- npx eslint src scripts
校驗別的類型的文件
通常 ESLint 只能校驗 JS 文件。比如需要校驗 .vue 文件，光配置 vue 插件和 vue-eslint-parser 解析器是不夠的，還需要讓 ESLint 在查找文件的時候找到 .vue 文件。
可以通過 --ext 來指定具體需要校驗的文件：
- npx eslint --ext .js,.jsx,.vue src
自動修復(fù)部分校驗錯誤的代碼
rules 列表項中標(biāo)識了一個扳手 圖案的規(guī)則就標(biāo)識該規(guī)則是可以通過 ESLint 工具自動修復(fù)代碼的。如何自動修復(fù)呢?通過 --fix 即可。比如對于 ESLint Rules 里的這個 semi 規(guī)則，它就是帶扳手圖案的。
對于如下的 a.js 代碼：
- const num = 12
當(dāng)在配置文件配置了 'semi': [2, 'always'] 后，運行命令：
- npx eslint --fix a.js
校驗直接就通過了，且會自動修復(fù)代碼，在代碼末尾自動加上分號。
把校驗命令加到 package.json
檢驗命令比較長，也難記，習(xí)慣上會把這些命名直接寫到 package.json 里：
- {
- "scripts": {
- "lint": "npx eslint --ext .js,.jsx,.vue src",
- "lint:fix": "npx eslint --fix --ext .js,.jsx,.vue src",
- }
- }
過濾一些不需要校驗的文件
對于一些公共的 JS、測試腳本或者是特定目錄下的文件習(xí)慣上是不需要校驗的，因此可以在項目根目錄通過創(chuàng)建一個 .eslintignore 文件來配置，告訴 ESLint 校驗的時候忽略它們：
- public/
- src/main.js
除了 .eslintignore 中指定的文件或目錄，ESLint 總是忽略 /node_modules/ 和 /bower_components/ 中的文件;因此對于一些目前解決不了的規(guī)則報錯，但是如果又急于打包上線，在不影響運行的情況下，我們就可以利用 .eslintignore 文件將其暫時忽略。
在 Vue 項目中的實踐
上面把 ESLint 的幾乎所有的配置參數(shù)和校驗方式都詳細(xì)的介紹了一遍，但是如果想在項目中落地，僅僅靠上面的知識還是不夠的。下面將細(xì)說如何在 Vue 中落地代碼校驗。
關(guān)于如何在 Vue 中落地代碼校驗，一般是有 2 種情況：
- 通過 vue-cli 初始化項目的時候已經(jīng)選擇了對應(yīng)的校驗配置
- 對于一個空的 Vue 項目，想接入代碼校驗
其實這 2 種情況最終的校驗的核心配置都是一樣的，只是剛開始的時候安裝的包有所區(qū)別。下面通過分析 vue-cli 配置的代碼校驗，來看看它到底做了哪些事情，通過它安裝的包以及包的作用，我們就會知道如何在空項目中配置代碼校驗了。
通過 vue-cli 初始化的項目
如果你的項目最初是通過 vue-cli 新建的，那么在新建的時候會讓你選
- 是否支持 eslint;
- 是否開啟保存校驗;
- 是否開啟提交前校驗;
如果都開啟了話，會安裝如下幾個包：
- eslint：前面 2 大章節(jié)介紹的就是這玩意，ESLint 出品，是代碼校驗的基礎(chǔ)包，且提供了很多內(nèi)置的 Rules，比如 eslint:recommended 經(jīng)常被作為項目的 JS 檢查規(guī)范被引入;
- babel-eslint：一個對 Babel 解析器的包裝，使其能夠與 ESLint 兼容;
- lint-staged：請看后面 pre-commit 部分;
- @vue/cli-plugin-eslint
- eslint-plugin-vue
下面重點介紹 @vue/cli-plugin-eslint 和 eslint-plugin-vue，說下這 2 個包是干嘛的。
@vue/cli-plugin-eslint
這個包它主要干了 2 件事情：
第一件事
往 package.json 里注冊了一個命令：
- {
- "scripts": {
- "lint": "vue-cli-service lint"
- }
- }
執(zhí)行這個命令之后，它會去檢查和修復(fù)部分可以修復(fù)的問題。默認(rèn)查找的文件是 src 和 tests 目錄下所有的 .js,.jsx,.vue 文件，以及項目根目錄下所有的 js 文件(比如，也會檢查 .eslintrc.js)。
當(dāng)然你也可以自定義的傳入?yún)?shù)和校驗文件：
- vue-cli-service lint [options] [...files]
支持的參數(shù)如下：
- --no-fix: 不會修復(fù) errors 和 warnings;
- --max-errors [limit]：指定導(dǎo)致出現(xiàn) npm ERR 錯誤的最大 errors 數(shù)量;
第二件事
增加了代碼保存觸發(fā)校驗的功能 lintOnSave，這個功能默認(rèn)是開啟的。如果想要關(guān)閉這個功能，可以在 vue.config.js 里配置，習(xí)慣上只開啟 development 環(huán)境下的代碼保存校驗功能：
- module.exports = {
- lintOnSave: process.env.NODE_ENV === 'development',
- }
lintOnSave 參數(shù)說明：
- true 或者 warning：開啟保存校驗，會將 errors 級別的錯誤在終端中以 WARNING 的形式顯示。默認(rèn)的，WARNING 將不會導(dǎo)致編譯失敗;
- false：不開啟保存校驗;
- error：開啟保存校驗，會將 errors 級別的錯誤在終端中以 ERROR 的形式出現(xiàn)，會導(dǎo)致編譯失敗，同時瀏覽器頁面變黑，顯示 Failed to compile。
eslint-plugin-vue
eslint-plugin-vue 是對 .vue 文件進(jìn)行代碼校驗的插件。
針對這個插件，它提供了這幾個擴(kuò)展
- plugin:vue/base：基礎(chǔ)
- plugin:vue/essential：預(yù)防錯誤的(用于 Vue 2.x)
- plugin:vue/recommended：推薦的，最小化任意選擇和認(rèn)知開銷(用于 Vue 2.x);
- plugin:vue/strongly-recommended：強(qiáng)烈推薦，提高可讀性(用于 Vue 2.x);
- plugin:vue/vue3-essential：(用于 Vue 3.x)
- plugin:vue/vue3-strongly-recommended：(用于 Vue 3.x)
- plugin:vue/vue3-recommended：(用于 Vue 3.x)
各擴(kuò)展規(guī)則列表：vue rules
看到這么一堆的擴(kuò)展，是不是都不知道選哪個了
代碼規(guī)范的東西，原則還是得由各自的團(tuán)隊去磨合商議出一套適合大家的規(guī)則。不過，如果你用的是 Vue2，我這里可以推薦 2 套 extends 配置：
- {
- // Vue 官方示例上的配置
- extends: ['eslint:recommended', 'plugin:vue/recommended'],
- // 或者使用 AlloyTeam 團(tuán)隊那套
- extends: ['alloy', 'alloy/vue']
- }
配置和插件對應(yīng)的解析器
如果是 Vue 2.x 項目，配置了 eslint-plugin-vue 插件和 extends 后，template 校驗還是會失效，因為不管是 ESLint 默認(rèn)的解析器 Espree 還是 babel-eslint 都只能解析 JS，無法解析 template 的內(nèi)容。
而 vue-eslint-parser 只能解析 template 的內(nèi)容，但是不會解析 JS，因此還需要對解析器做如下配置：
- {
- parser: 'vue-eslint-parser',
- parseOptions: {
- parser: 'babel-eslint',
- ecmaVersion: 12,
- sourceType: 'module'
- },
- extends: [
- 'eslint:recommended',
- 'plugin:vue/recommended'
- ],
- plugins: ['vue']
- }
參考：eslint-plugin-vue faq[13]
讓 Prettier 管控代碼風(fēng)格
針對 Prettier 不得不提出以下疑問?
- Prettier 是什么?
- 為什么有了 ESLint，還需要引入 Prettier 呢?它兩之間有什么區(qū)別?
- 如何配置 Prettier?
- Prettier 如何和 ESLint 結(jié)合使用?
- Prettier 是什么
用它自己的話來說：我是一個自以為是的代碼格式化工具，而且我支持的文件類型很多，比如：
- JavaScript(包括實驗中的特性)
- JSX
- Vue
- TypeScript
- CSS、Less、SCSS
- HTML
- JSON
- Markdown
以及還有一些其他類型的文件。
Prettier 對比 ESLint
我們知道 ESLint 負(fù)責(zé)了對代碼的校驗功能，并且主要提供了 2 類規(guī)則：
- 檢查格式化的規(guī)則
- 檢查代碼質(zhì)量的規(guī)則
說到底 ESLint 就是通過一條條的規(guī)則去限制代碼的規(guī)范，但是這些規(guī)則畢竟是有限的，而且更重要的是這些規(guī)則的重點并不在代碼風(fēng)格上，所以單憑 ESLint 并不能完全的統(tǒng)一代碼風(fēng)格。
這個時候就需要引入 Prettier 了，因為它干的事就是只管代碼格式化，不管代碼質(zhì)量。
“Prettier：在代碼風(fēng)格這一塊，我一直拿捏的死死的。
如何配置 Prettier
初始化操作：
- # 安裝包
- npm i prettier -D
- # 新建 .prettierrc.js
- echo module.exports = {} > .prettierrc.js
- # 新建 .prettierignore
- echo > .prettierignore
Prettier 支持可以配置參數(shù)不多，總共才 21 個，這里是所有參數(shù)的說明 prettier options[14]
所有參數(shù)都有默認(rèn)值，也就是說即使你沒有配置 .prettierrc.js，當(dāng)你用 Prettier 去格式化代碼的時候全部都會走默認(rèn)配置。針對個別參數(shù)，你不想用默認(rèn)設(shè)置的話，就可以在 .prettierrc.js 配置具體想要的值。
如下，把項目中會用到的參數(shù)進(jìn)行一個說明：
- module.exports = {
- printWidth: 80, //（默認(rèn)值）單行代碼超出 80 個字符自動換行
- tabWidth: 2, //（默認(rèn)值）一個 tab 鍵縮進(jìn)相當(dāng)于 2 個空格
- useTabs: true, // 行縮進(jìn)使用 tab 鍵代替空格
- semi: false, //（默認(rèn)值）語句的末尾加上分號
- singleQuote: true, // 使用單引號
- quoteProps: 'as-needed', //（默認(rèn)值）僅僅當(dāng)必須的時候才會加上雙引號
- jsxSingleQuote: true, // 在 JSX 中使用單引號
- trailingComma: 'all', // 不用在多行的逗號分隔的句法結(jié)構(gòu)的最后一行的末尾加上逗號
- bracketSpacing: true, //（默認(rèn)值）在括號和對象的文字之間加上一個空格
- jsxBracketSameLine: true, // 把 > 符號放在多行的 JSX 元素的最后一行
- arrowParens: 'avoid', // 當(dāng)箭頭函數(shù)中只有一個參數(shù)的時候可以忽略括弧
- vueIndentScriptAndStyle: false, //（默認(rèn)值）對于 .vue 文件，不縮進(jìn)