Ⅰ 請教如何在phpStorm中配置eslint
使用ESlint
一、ESLint跟jsLint和JSHint類似，但有以下區別：
1.使用Espree進行js解析(parse)
2.用AST抽象語法樹去識別(evaluate)代碼中的模式3.每個規則都是獨立的插件
二、安裝
全局安裝：
npm install -g eslint
三、使用
如果是第一次使用，eslint --init 命令幫你完成初始化，生成.eslintrc文件然後eslint test.js test2.js
四、配置
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
提示有三個level：
"off" or 0 - 關閉這個規則校驗
"warn" or 1 - 開啟這個規則校驗，但只是提醒，不會退出"error" or 2 - 開啟這個規則校驗，並退出
五、常見問題
1.為什麼不用jslint
創建eslint是因為急需插件化的校驗工具
2.ESLint跟JSHint、JSCS的比較
ESLint比JSlint要慢2~3倍，因為ESLint在識別代碼前需要用Espress構建AST,而JSHint在解析的時候就會識別代碼。雖然慢些，但不至於成為痛點。
ESLint比JSCS快，（as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.）3.ESLint僅僅是校驗還是也檢查代碼風格
都有。ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.
4.支持es6嗎？
支持。參考配置eslint.org/docs/user-guide/configuring5.支持JSX？
支持，但並不表示支持React。（Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration.). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn't recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.）5.支持es7嗎？
本身不支持，可以使用babel-eslint
六、下面詳細介紹下配置，地址eslint.org/docs/user-guide/configuring1.配置ESLint
主要有兩種方法配置
（1）配置注釋，直接嵌入到js文件中
（2）配置文件，使用js、json或者yaml文件來為整個目錄及其子目錄配置。形式有：.eslintrc.*文件，或者在package.json中配置eslintConfig欄位，或者在命令行里配置。
配置分幾個方面：
（1）環境（env）：設置你的腳本的目標運行環境，如browser，amd，es6，commonjs等，每種環境有預設的全局變數（2）全局變數：增加的全局變數供運行時使用（3）規則（rules）：設定的規則及該規則對應的報錯level2.配置解析器選項（Specifying Parser Options）默認僅支持ES5語法，可以設置為es6 es7 jsx等。
復制代碼
{
"parserOptions": {
"ecmaVersion": 6, // 可選 3 5（默認） 6 7"sourceType": "mole", // 可選script（默認） mole"ecmaFeatures": {
"jsx": true
},
},
"rules": {
"semi": 2
}
}
復制代碼
3.配置解析器（Specifying Parser），需要本地npm模塊{
"parser": "esprima", // Espree(默認) Esprima Babel-ESLint"rules": { "semi": "error" } }
4.配置環境（Specifying Environments），可以多選復制代碼
browser - browser global variables.
node - Node.js global variables and Node.js scoping.
commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
shared-node-browser - Globals common to both Node and Browser.
es6 - enable all ECMAScript 6 features except for moles.
worker - web workers global variables.
amd - defines require() and define() as global variables as per the amd spec.
mocha - adds all of the Mocha testing global variables.
jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
jest - Jest global variables.
phantomjs - PhantomJS global variables.
protractor - Protractor global variables.
qunit - QUnit global variables.
jquery - jQuery global variables.
prototypejs - Prototype.js global variables.
shelljs - ShellJS global variables.
meteor - Meteor global variables.
mongo - MongoDB global variables.
applescript - AppleScript global variables.
nashorn - Java 8 Nashorn global variables.
serviceworker - Service Worker global variables.
atomtest - Atom test helper globals.
embertest - Ember test helper globals.
webextensions - WebExtensions globals.
greasemonkey - GreaseMonkey globals.
復制代碼
如果要在待校驗文件裡面配置可以這樣配置：
/*eslint-env node, mocha */
如果要在配置文件中配置：
{
"env": {
"browser": true,
"node": true
}
}
如果在package.json中配置：
復制代碼
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}
復制代碼
如果在YAML中配置：
---
env:
browser: true
node: true
也可以用插件
{
"plugins": ["example"],
"env": {
"example/custom": true
}
}
5.配置全局變數（Specifying Globals）
定義了全局變數以後，使用他們，ESLint不會發出警告。
在js文件中定義：
/*global var1, var2*/
設置read only
/*global var1:false, var2:false*/
在配置文件中：
{
"globals": {
"var1": true,
"var2": false
}
}
6.配置插件（Configuring Plugins）
使用npm安裝第三方插件
{
"plugins": [
"plugin1",
"eslint-plugin-plugin2"
]
}
7.配置規則（Configuring Rules）
js中配置：
/*eslint eqeqeq: "off", curly: "error"*/
或者：
/*eslint eqeqeq: 0, curly: 2*/
如果規則有多個選項：
/*eslint quotes: ["error", "double"], curly: 2*/在配置文件中設置：
復制代碼
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
復制代碼
使用插件：
復制代碼
{
"plugins": [
"plugin1"
],
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"],
"plugin1/rule1": "error"
}
}
復制代碼
/*eslint "plugin1/rule1": "error" */
臨時關閉eslint校驗：
/*eslint-disable */
//Disable all rules between comments
alert('foo');
/*eslint-enable */
/*eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/*eslint-enable no-alert */
在js特定行關閉校驗：
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
alert('foo'); // eslint-disable-line no-alert, quotes, semi// eslint-disable-next-line no-alert, quotes, semialert('foo');
8.增加共享設置（Adding Shared Settings）
{
"settings": {
"sharedData": "Hello"
}
}
9.使用配置文件
eslint -c myconfig.json myfiletotest.js
10.繼承配置文件（Extending Configuration Files）復制代碼
{
"extends": [
"./node_moles/coding-standard/eslintDefaults.js",// Override eslintDefaults.js
"./node_moles/coding-standard/.eslintrc-es6",// Override .eslintrc-es6
"./node_moles/coding-standard/.eslintrc-jsx",],
"rules": {
// Override any settings from the "parent" configuration"eqeqeq": "warn"
}
}
復制代碼
11.忽略文件或目錄(Ignoring Files and Directories)建立.eslintignore文件
復制代碼
# /node_moles and /bower_components ignored by default# Ignore files compiled from TypeScript and CoffeeScript**/*.{ts,coffee}.js
# Ignore built files except build/index.jsbuild/
!build/index.js
Ⅱ ESLint配置詳解(一) - 超級深入詳細
如果項目目錄下有多個配置文件，ESLint 只會使用一個，優先順序為： .eslintrc.js > .eslintrc > package.json ，一般我們都是在 .eslintrc.js 配置。
同時，如果配置文件里沒有 "root": true 這個屬性，ESLint就會繼續向外尋找配置文件，直到找到有 "root": true 的為止，所有這些配置文件的規則都會被層疊應用。若有重復的屬性配置，則離文件更近的配置文件具有更高的優先順序。
當想要所有項目都遵循一個特定的約定時會很有用，但還是建議給項目根目錄的 .eslintrc.js 加上 root: true
1.1 extends - Extending Configuration Files
一個ESLint配置文件，一旦擴展了(即從外部引入了其他配置包)，就能繼承另一個配置文件的所有屬性(包括rules, plugins, and language option在內)，然後通過merge合並/覆蓋所有原本的配置。
extends 屬性的值可以是：
"eslint:recommended" 這個擴展包幫我們啟用了一系列核心規則，這些規則是在 rules頁面 中被標記為 ✅ 的常見問題。
ESLint插件 是可以給ESLint添加很多擴展規則的npm包，它可以執行很多方法，包括但不限於 添加新規則 和 導出 可共享配置 。
在添加到配置文件 (如 .eslintrc.js ) 的 plugins 的 時候，可以省略插件包名的 eslint-plugin- 前綴
在 extends 中插件字元串值則可以是：
插件包名的格式一般是 eslint-plugin-<plugin-name> ，就像 eslint-plugin-prettier ；
也可能是含命名空間包的格式 @<scope>/eslint-plugin-<plugin-name> ，例如 @vue/eslint-config-prettier；
甚至 @<scope>/eslint-plugin ，如 @jquery/eslint-plugin 。
通過extends設置的配置包載入的時候，是遞歸的形式去查找配置文件(最終是一個導出的對象，詳細看 ② )，然後一步步派生繼承的。
例如： extends: ["foo"] ，然後對應的 eslint-config-foo 有 plugins: ["bar"] , ESLint 會先找到 ./node_moles/ 下的 eslint-plugin-bar , (而不是 ./node_moles/eslint-config-foo/node_moles/)，更不會從祖先目錄去查找。配置文件和基本配置中的每個插件都會唯一地解析。
按照上述規則，我們來梳理下 ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"] (vue-cli4 + ESLint + prettier 的 默認extends值)的配置文件分別在哪裡。僅幫助加深理解。
我們再去項目根目錄的 ./node_moles 找 eslint-plugin-prettier 和 eslint-config-prettier 插件，然後得知，@vue/prettier最終導入了 ./node_moles/eslint-config-prettier/index.js 、 ./node_moles/eslint-config-prettier/vue.js 和 ./node_moles/eslint-plugin-prettier/eslint-plugin-prettier.js 的規則
parserOptions - Specifying Parser Options
指定你想要支持的 JavaScript 語言選項。默認支持 ECMAScript 5 語法。你可以覆蓋該設置，以啟用對 ECMAScript 其它版本和 JSX 的支持。
3.1 rules - Configuring Rules
ESLint 擁有大量的規則。你可以通過配置插件添加更多規則。使用注釋或配置文件修改你項目中要使用的規則。要改變一個規則，你必須將規則 ID 設置為下列值之一：
3.1.1 在文件注釋里配置規則 (只在當前文件生效)
上面的例子， eqeqeq 規則被關閉， curly 規則被打開，且定義為錯誤級別。出於便於理解的考慮，可以用字元串值，如果很熟悉的話用對應的數字來定義也是一樣的。
如果一個規則有額外的參數選項，你可以用數組字面量語法來指定它們，比如：
這條注釋為規則 quotes 指定了 「double」選項。數組的第一項總是規則的嚴重程度（數字/字元串）
3.1.2 在配置文件配置規則
要配置定義在插件中的一個規則，你必須使用 插件名/規則ID 的形式。比如：
規則 plugin1/rule1 表示來自插件 plugin1 的 rule1 規則。當指定來自插件的規則時，確保刪除 eslint-plugin- 前綴。ESLint 在內部只使用沒有前綴的名稱去定位規則。
4.1 parser - Specifying Parser
被指定的解析器必須是可以從它的配置文件中載入的Node模塊。這意味著應該使用 npm 單獨安裝這個解析器包；它必須符合 parser interface 。
4.2 plugins - Configuring Plugins
ESLint支持使用第三方插件。要使用插件，必須先用npm進行安裝。
要在配置文件中配置插件，可以用 plugins 屬性，它的值是包含插件名稱的列表(數組)。其中，插件名可以省略 eslint-plugin- 前綴(如果有的話)。
插件是根據配置文件(如 eslintrc.js )解析的。換句話說，ESLint會像通過運行 require('eslint-plugin-pluginname') 一樣載入我們配置在 eslintrc.js 中的插件。所以要保證在這個包在當前配置文件的./node_moles/下找得到。
連著 extends 屬性講比較清楚，因此其他已經在上面 1.1.2 - 插件具體是如何實現擴展配置的 講過了。
避免文章冗長又礙可讀性又分篇了，指路：➡️ ESLint配置詳解(二) - 常用規則(Rules)集合
Ⅲ Taro (VUE style) 欏圭洰澧炲姞lint浠ュ強git hooks
鎺㈣ㄦ庝箞鍋氫箣鍓嶏紝鎴戜滑寰堟湁蹇呰佺粰 Lint 鏉ヤ釜娓呮櫚銆佸噯紜鐨勫畾涔夛紝wikipedia 鐨勫畾涔夊備笅錛
綆鍗曟潵璇達紝Lint 灝辨槸瀵逛唬鐮佸仛闈欐佸垎鏋愶紝騫惰瘯鍥炬壘鍑烘綔鍦ㄩ棶棰樼殑宸ュ叿錛屽疄鎴樹腑鎴戜滑涔熺敤 Lint 鏉ユ寚浣跨敤宸ュ叿鐨勮繃紼嬨
浣跨敤 Lint 浼氭湁浠涔堝ソ澶勫憿錛熷湪鎴戠湅鏉ヨ嚦灝戝叿鏈夊備笅 3 鐐癸細
鍙浠ユ涓嶅㈡皵鐨勮達紝濡傛灉浣犱笉鍋 Lint錛屽氨鏄鍦ㄦ氮璐硅嚜宸辯殑鏃墮棿錛屾氮璐瑰洟闃熺殑璧勬簮銆
閫氬父鏉ヨ村湪涓涓猇UE欏圭洰涓錛岄氳繃@vue/cli 鐢熸垚鐨勯」鐩錛屼細鑷鍔ㄥ畨瑁呮墍闇鐨刵pm 渚濊禆錛屽苟涓斿湪package.json 涓鐢熸垚鐩稿叧鐨別slint鍛戒護
浣嗗逛簬涓涓 Taro based VUE style 欏圭洰錛屾垜浠涔熷笇鏈涘湪寮鍙戝悓瀛︽彁浜や唬鐮 (git commit) 涔嬪墠灝辮繘琛屼唬鐮佽勮寖鐨勬嫻嬶紝榪欐牱鍙浠ラ伩鍏嶅悗鏈熷啀涓嶆柇淇鏀逛唬鐮佸紓鍛充箣綾葷殑楹葷儲鍑虹幇銆
浣嗘槸@tarojs/cli 鐢熸垚欏圭洰鏃跺苟娌℃湁鍍廆vue/cli 鍒涘緩欏圭洰鏃惰嚜鍔ㄥ畨瑁呮墍闇鐨刵pm lib錛屼篃娌℃湁鍦╬ackage.json 涓鐢熸垚鐩稿簲鐨勫懡浠ゃ
閭ｄ箞鎴戜滑瑕佸備綍鍦╰aro 欏圭洰涓閰嶇疆eslint 浠ュ強git宸ヤ綔嫻佺殑媯嫻嬭Е鍙戝憿錛
棣栧厛鎴戜滑榪涜宔slint鏈韜鐨勯厤緗銆
闇瑕佸畨瑁呯殑npm 渚濊禆濡備笅錛
浠ヤ笂瑙勫垯鐨勫畨瑁咃紝涓鑸鎯呭喌涓嬪氨宸茬粡婊¤凍鎴戜滑瀵逛簬taro鐢熸垚鐨剉ue欏圭洰榪涜屼唬鐮佹嫻嬩簡銆傛帴涓嬫潵濡傛灉鎴戜滑闇瑕佸筫slint瑙勫垯鐨勫簲鐢ㄨ繘琛岀壒孌婄殑閰嶇疆錛岃蜂慨鏀歸」鐩鏍圭洰褰曚笅鐨.eslintrc.js 鏂囦歡銆
鐢變簬鎴戜滑闇瑕佸箆ue鏂囦歡榪涜屼唬鐮佽勫垯媯嫻嬶紝鍥犳ら渶瑕佸湪 .eslintrc.js 鏂囦歡涓鏂板瀍xtends灞炴э細
鏇村氳︽儏璇峰弬瑙 https://eslint.org/docs/user-guide/configuring/
榪欓噷棣栧厛瑕佷粙緇嶄竴涓嬪挨澶у湪vue涓浣跨敤鐨剏orkie榪欎釜搴撱
鎵ц vue create 鍛戒護鐨勬椂鍊欙紝浼氬畨瑁呬竴涓鍖咃紝鍙錛歽orkie錛岃繖涓鍖呮槸灝ゅぇ fork 鑷 husky 鐨勶紝瀹冧咯鍔熻兘鏄涓鏍風殑錛岄兘鏄鐢熸垚涓浜 git hooks 鏂囦歡錛岃誨彇欏圭洰涓璸ackage.json鐨勭浉鍏抽厤緗欏瑰幓鎵ц屼竴浜涘懡浠わ紝鍖哄埆鏄灝ゅぇ鍋氫簡涓浜涢昏緫鍜岄厤緗涓婄殑鏀瑰姩銆
瀹夎呭畬榪欎釜鍖呬互鍚庯紝浼氳嚜鍔ㄦ墽琛 yorkie 鍖呴噷闈㈢殑涓涓鑴氭湰錛歜in/install.js
瀹夎呭畬鎴恲orkie榪欎釜鍖呬箣鍚庯紝浼氬湪浣犻」鐩涓嬬殑.git/hooks鐩褰曚腑鐢熸垚寰堝 git hooks 鏂囦歡錛
姝ゆ椂錛屽綋浣犳墽琛屼竴浜 git 鍛戒護鐨勬椂鍊欙紝姣斿傦細git push, git commit絳夛紝git 灝變細鎵ц岀浉搴旂殑 hook銆
榪欎箣鍚庯紝鎵ц実it commit榪欎釜鍛戒護鐨勬椂鍊欙紝git 浼氬幓鎵ц pre-commit 榪欎釜 hook銆
hook鎵ц岀殑鍐呭癸紝鍙浠ョ湅鍒板湪package.json 涓涓鑸宸茬粡榪涜屼簡閰嶇疆錛屾垜浠鐪嬩笅鍦╮ivendell欏圭洰涓鏄濡備綍榪涜岄厤緗鐨勶細
lint-staged
鐜板湪濡傛灉鎴戜滑鎵ц実it commit 鍛戒護鏃訛紝git hooks 浼氬幓鑷鍔ㄦ墽琛屽瑰簲鐨勫懡浠わ紝浣嗘ゆ椂浣犲彲鑳戒細寰楀埌涓涓閿欒鎻愮ず 錛堝傛灉鏄痸ue欏圭洰錛屽垯浣滀負渚濊禆宸茬粡瀹夎咃級錛屽憡璇変綘闇瑕佸畨瑁卨int-staged錛屾帴涓嬫潵鎴戜滑鐪嬬湅lint-staged 鏄鍋氫粈涔堢敤鐨勩
濡傛灉姣忔℃彁浜や唬鐮佷箣鍓嶏紝閮戒細鎵ц宔slint鍘繪嫻嬫墍鏈夋枃浠墮噷鐨勪唬鐮佽勫垯闂棰橈紝濡傛灉浠ｇ爜涓瑙﹀彂浜嗚勫垯涓嶅厑璁哥殑浠ｇ爜椋庢牸錛屽氨浼氳緭鍑烘墍鏈夌殑闂棰橈細
鍙浠ョ湅鍒板傛灉欏圭洰榪樻湭榪涜岃繃浠ｇ爜椋庢牸媯嫻嬶紝鍥犳や竴涓嬫嫻嬪嚭鏉ヤ簡涓涓囧氫釜lint閿欒
鍗充究鏄緇忚繃浠ｇ爜瑙勮寖淇姝ｇ殑欏圭洰錛屾湁鏃跺欏叾浠栧悓瀛︾殑浠ｇ爜涓鍑虹幇浜唋int闂棰橈紝鍦ㄤ綘鎻愪氦浠ｇ爜鐨勬椂鍊欐姤浜嗗嚭鏉ワ紝瀵艱嚧浣犳病娉曟彁浜や唬鐮佷篃鏄涓浠跺緢鐑︿漢鐨勪簨鎯呫傚洜姝ゅ姞涓妉int-staged鐨勮兘鍔涳紝鍦ㄦ瘡涓浜烘湁鏂扮殑鎻愪氦鏃訛紝浠呭逛簬鏈変慨鏀圭殑浠ｇ爜榪涜屼唬鐮佹嫻嬶紝灝辮В鍐充簡榪欐牱鐨勯棶棰樸
Feedly 鐨勫伐紼嬪笀 Andrey Okonetchnikov 寮鍙戠殑 lint-staged 灝辨槸鍩轟簬榪欎釜鎯蟲硶錛屽叾涓 staged 鏄 Git 閲岄潰鐨勬傚康錛屾寚寰呮彁浜ゅ尯錛屼嬌鐢 git commit -a錛屾垨鑰呭厛 git add 鐒跺悗 git commit 鐨勬椂鍊欙紝浣犵殑淇鏀逛唬鐮侀兘浼氱粡榪囧緟鎻愪氦鍖恆
lint-staged 鐢ㄦ硶濡備笅錛
棣栧厛錛屽畨瑁呬緷璧栵細
鐒跺悗錛屼慨鏀 package.json 閰嶇疆錛屽炲姞濡備笅鍏ュ彛錛
瀵逛簬鍒濇湡浠0鍒1鐨勯」鐩寮鍙戱紝鎴戜滑鍙鑳芥病鏈夌簿鍔涘幓娉ㄦ剰浠ｇ爜椋庢牸浠ュ強鑹濂界殑鏍煎紡銆備絾鏄涓嶅ソ鐨勪唬鐮侀庢牸鍙鑳介殣鈃忕潃寰堝氫笉瀹規槗鍙戠幇鐨凚UG錛屽苟涓旂粰鍚庢潵鎺ユ墜淇鏀圭殑鍚屽﹀甫鏉ュ緢澶х殑楹葷儲銆
涓涓涓嶈勮寖鐨勪唬鐮佹枃浠訛紝璁╅槄璇昏呮懜涓嶇潃澶磋剳錛屼篃璁╀慨鏀圭殑浜鴻倽鍒板噷鏅ㄤ篃鎼炰笉娓呮氬叾涓鍗冧笣涓囩紩鐨勯昏緫鍏崇郴銆
鑰岃繖涓鎺ユ墜鐨勪漢鍙鑳藉氨鏄鍑犱釜鏈堜箣鍚庣殑浣犺嚜宸便
鎵浠ュ逛簬浠ｇ爜瑙勮寖鍜屾牸寮忕殑綺捐繘錛屼笉鏄鍦ㄦ氮璐規椂闂達紝鍙嶈屾槸涓轟簡鏈鏉ユ洿濂借妭鐪佷綘鐨勭敓鍛姐
save your life and save others' too
Ⅳ 現代配置指南——YAML 比 JSON 高級在哪
一直以來，前端工程中的配置大多都是 .js 文件或者 .json 文件，最常見的比如：
這些配置對前端非常友好，因為都是我們熟悉的 JS 對象結構。一般靜態化的配置會選擇 json 文件，而動態化的配置，涉及到引入其他模塊，因此會選擇 js 文件。
還有現在許多新工具同時支持多種配置，比如 Eslint ，兩種格式的配置任你選擇：
後來不知道什麼時候，突然出現了一種以 .yaml 或 .yml 為後綴的配置文件。一開始以為是某個程序的專有配置，後來發現這個後綴的文件出現的頻率越來越高，甚至 Eslint 也支持了第三種格式的配置 .eslintrc.yml 。
既然遇到了，那就去 探索 它！
下面我們從 YAML 的 出現背景 ， 使用場景 ， 具體用法 ， 高級操作 四個方面，看一下這個流行的現代化配置的神秘之處。
一個新工具的出現避免不了有兩個原因：
YAML 這種新工具就屬於後者。其實在 yaml 出現之前 js+json 用得也不錯，也沒什麼特別難以處理的問題；但是 yaml 出現以後，開始覺得它好亂呀什麼東西，後來了解它後，越用越喜歡，一個字就是優雅。
很多文章說選擇 yaml 是因為 json 的各種問題，json 不適合做配置文件，這我覺得有些言過其實了。我更願意將 yaml 看做是 json 的升級，因為 yaml 在格式簡化和體驗上表現確實不錯，這個得承認。
下面我們對比 YAML 和 JSON，從兩方面分析：
JSON 比較繁瑣的地方是它嚴格的格式要求。比如這個對象：
在 JSON 中以下寫法通通都是錯的：
字元串的值必須 k->v 都是 "" 才行：
雖然是統一格式，但是使用上確實有不便利的地方。比如我在瀏覽器上測出了介面錯誤。然後把參數拷貝到 Postman 里調試，這時就我要手動給每個屬性和值加 "" 號，非常繁瑣。
YAML 則是另闢蹊徑，直接把字元串符號幹掉了。上面對象的同等 yaml 配置如下：
沒錯，就這么簡單！
除了 "" 號，yaml 覺得 {} 和 [] 這種符號也是多餘的，不如一起幹掉。
於是呢，以這個對象數組為例：
轉換成 yaml 是這樣的：
對比一下這個精簡程度，有什麼理由不愛它？
說起增加的部分，最值得一提的，是 YAML 支持了 注釋 。
用 JSON 寫配置是不能有注釋的，這就意味著我們的配置不會有備注，配置多了會非常凌亂，這是最不人性化的地方。
現在 yaml 支持了備注，以後配置可以是這樣的：
把這種配置丟給新同事，還怕他看不懂配了啥嗎？
除注釋外，還支持配置復用的相關功能，這個後面說。
我接觸的第一個 yaml 配置是 Flutter 項目的包管理文件 pubspec.yaml ，這個文件的作用和前端項目中的 package.json 一樣，用於存放一些全局配置和應用依賴的包和版本。
看一下它的基本結構：
你看這個結構和 package.json 是不是基本一致？ dependencies 下列出應用依賴和版本， dev_dependencies 下的則是開發依賴。
後來在做 CI/CD 自動化部署的時候，我們用到了 GitHub Action。它需要多個 yaml 文件來定義不同的工作流，這個配置可比 flutter 復雜得多。
其實不光 GitHub Action，其他流行的類似的構建工具如 GitLab CI/CD，circleci，全部都是齊刷刷的 yaml 配置，因此如果你的項目要做 CI/CD 持續集成，不懂 yaml 語法肯定是不行的。
還有，接觸過 Docker 的同學肯定知道 Docker Compose，它是 Docker 官方的單機編排工具，其配置文件 docker-compose.yml 也是妥妥的 yaml 格式。現在 Docker 正是如日中天的時候，使用 Docker 必然免不了編排，因此 yaml 語法早晚也要攻克。
上面說的這 3 個案例，幾乎都是現代最新最流行的框架/工具。從它們身上可以看出來，yaml 必然是下一代配置文件的標准，並且是 前端-後端-運維 的通用標准。
說了這么多，你躍躍欲試了嗎？下面我們詳細介紹 yaml 語法。
介紹 yaml 語法會對比 json 解釋，以便我們快速理解。
先看一下 yaml 的幾個特點：
相比於 JSON 來說，最大的區別是用 縮進 來表示層級，這個和 Python 非常接近。還有強化的一點是支持了注釋，JSON 默認是不支持的（雖然 TS 支持），這也對配置文件非常重要。
YAML 支持以下幾種數據結構：
先看對象，上一個 json 例子：
轉換成 yaml：
對象是最核心的結構，key 值的表示方法是 [key]: ，注意這里 冒號後面有個空格，一定不能少 。value 的值就是一個 純量 ，且默認不需要引號。
數組和對象的結構差不多，區別是在 key 前用一個 - 符號標識這個是數組項。注意這里 也有一個空格 ，同樣也不能少。
轉換成 JSON 格式如下：
了解了基本的對象和數組，我們再來看一個復雜的結構。
眾所周知，在實際項目配置中很少有簡單的對象或數組，大多都是對象和數組相互嵌套而成。在 js 中我們稱之為對象數組，而在 yaml 中我們叫 復合結構 。
比如這樣一個稍復雜的 JSON：
轉換成復合結構的 YAML：
若你想嘗試更復雜結構的轉換，可以在 這個 網頁中在線實踐。
純量比較簡單，對應的就是 js 的基本數據類型，支持如下：
比較特殊的兩個，null 用 ~ 符號表示，時間大多用 2021-12-21 這種格式表示，如：
轉換成 JS 後：
在 yaml 實戰過程中，遇到過一些特殊場景，可能需要一些特殊的處理。
在 shell 中我們常見到一些參數很多，然後特別長的命令，如果命令都寫在一行的話可讀性會非常差。
假設下面的是一條長命令：
在 linux 中可以這樣處理：
就是在每行後加 符號標識換行。然而在 YAML 中更簡單，不需要加任何符號，直接換行即可：
YAML 默認會把換行符轉換成 空格 ，因此轉換後 JSON 如下，正是我們需要的：
然而有時候，我們的需求是 保留換行符 ，並不是把它轉換成空格，又該怎麼辦呢？
這個也簡單，只需要在首行加一個 | 符號：
轉換成 JSON 變成了這樣：
獲取配置是指，在 YAML 文件中定義的某個配置，如何在代碼（JS）里獲取？
比如前端在 package.json 里有一個 version 的配置項表示應用版本，我們要在代碼中獲取版本，可以這么寫：
JSON 是可以直接導入的，YAML 可就不行了，那怎麼辦呢？我們分環境解析：
在瀏覽器中
瀏覽器中代碼用 webapck 打包，因此加一個 loader 即可：
然後配置 loader：
在組件中使用：
在 Node.js 中
Node.js 環境下沒有 Webpack，因此讀取 yaml 配置的方法也不一樣。
首先安裝一個 js-yaml 模塊：
然後通過模塊提供的方法獲取：
配置項復用的意思是，對於定義過的配置，在後面的配置直接引用，而不是再寫一遍，從而達到復用的目的。
YAML 中將定義的復用項稱為錨點，用 & 標識；引用錨點則用 * 標識。
對應的 JSON 如下：
但是錨點有個弊端，就是不能作為 變數 在字元串中使用。比如：
此時 key2 的值就是普通字元串 _my name is *name_，引用變得無效了。
其實在實際開發中，字元串中使用變數還是很常見的。比如在復雜的命令中多次使用某個路徑，這個時候這個路徑就應該是一個變數，在多個命令中復用。
GitHub Action 中有這樣的支持，定義一個環境變數，然後在其他的地方復用：
這種實現方式與 webpack 中使用環境變數類似，在構建的時候將變數替換成對應的字元串。
如果本文對你有啟發，請甩手一個贊