前言
這篇為什麼是編碼規範檢查呢？因為這是一個很重要的環節，一個好的編碼規範可以讓程式碼更加清晰易讀，在官方的 VUE-CLI 也是有著很好的編碼規範的，所以我也要加入這個環節。
其實不管在哪個專案中，編碼規範都是很重要的，像我們平日裡的專案開發當中，我們也會使用 ESLint 來進行程式碼規範檢查。
程式碼規範檢查
在前段這一塊當中我想大家都知道 ESLint 這個工具，它是一個程式碼規範檢查的工具，我們可以透過配置檔案來配置我們的程式碼規範。
在 Vue-CLI 中也是有著 ESLint 的配置的，我們可以在專案中找到 .eslintrc.js 這個檔案，這個檔案就是 ESLint 的配置檔案。
所以廢話不多說直接開幹，推進 Nue-CLI 的開發。這一篇先來實現程式碼規範檢查。
安裝 ESLint
首先需要安裝 ESLint，可以透過 npm 來進行安裝。
npm install eslint --save-dev
在安裝的過程中我遇到了問題，安裝的時候報錯，發現淘寶的映象源域名過期了，從 registry.npm.taobao.org 改為 registry.npmmirror.com 就可以了。
初始化 ESLint
安裝完成之後我們需要初始化 ESLint，可以透過 npx eslint --init 來進行初始化。
npx eslint --init
初始化 ESLint 配置
Need to install the following packages
首先它會詢問你 Need to install the following packages，這個意思是需要安裝一些依賴包，我們可以選擇 Yes 來進行安裝。
這個配置項，我在備文章的時候出來了，如果沒有出來的話，忽略即可
How would you like to use ESLint? ...
在初始化的過程中可以選擇自己的配置，首先要選擇的 How would you like to use ESLint? ... 這個選項，我選擇的是 To check syntax, find problems, and enforce code style。
因為我們是要檢查語法，找到問題並且強制執行程式碼風格。
What type of modules does your project use? ...
然後選好之後按回車進入到下一個選項，這個選項是 What type of modules does your project use? ...，我選擇的是 CommonJS (require/exports)，因為我是 Node.js 專案，我要用到模組化。
Which framework does your project use? ...
然後選好之後按回車進入到下一個選項，這個選項是 Which framework does your project use? ...，我選擇的是 None of these，因為我沒有用到框架。
Does your project use TypeScript? ...
然後選好之後按回車進入到下一個選項，這個選項是 Does your project use TypeScript? ...，我選擇的是 No，因為我沒有用到 TypeScript。
Where does your code run? ...
然後選好之後按回車進入到下一個選項，這個選項是 Where does your code run? ...，我選擇的是 Node，因為我是 Node.js 專案。
這裡有一個注意點，出現這個選項的時候預設是給你勾上 Browser 的，這個時候你需要按 Space 鍵來取消勾選（也就是鍵盤的空格鍵）去掉了之後在減鍵盤方向鍵下鍵來選中 Node，然後按空格勾選上 Node（不錄製 GIF 了我相信我的文字表達已經很OK了）：
How would you like to define a style for your project? ...
好了繼續往下看，然後選好之後按回車進入到下一個選項，這個選項是 How would you like to define a style for your project? ...，意思是你要如何定義你的專案風格，我選擇的是 Use a popular style guide。
Which style guide do you want to follow? ...
好了繼續往下看，然後選好之後按回車進入到下一個選項，這個選項是 Which style guide do you want to follow? ...，意思是你要遵循哪個程式碼風格指南，我選擇的是 Airbnb。
Airbnb 在 GitHub 有 141.6k 的 star，是一個非常受歡迎的程式碼風格指南。
What format do you want your config file to be in? ...
好了繼續往下看，然後選好之後按回車進入到下一個選項，這個選項是 What format do you want your config file to be in? ...，意思是你的配置檔案要使用什麼格式，我選擇的是 JavaScript。
繼續往下看出現了：
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:
eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2
? Would you like to install them now with npm? » No / Yes
Would you like to install them now with npm? 意思是你要現在安裝這些依賴嗎？我選擇的是 Yes。
選擇了 yes 之後再按回車，好大功告成了。
最後我再附上一張我所選擇的配置的截圖（供大家參考）：
總共有 9 個步驟，選擇的配置如上圖所示。
之後會在專案中生成一個 .eslintrc.js 檔案，這個檔案就是 ESLint 的配置檔案。
測試
eslint 配置內容建立好了，我們在專案當中配置好 ESLint 這裡我以 IDEA 為例（jetbrains 系列的編輯器），開啟 settings，搜尋 ESLint，然後勾選 Automatic ESLint configuration，這樣就可以自動配置 ESLint 了。
主要按照我如上的規範去做的去配置的，那麼設定好了 IDEA 的配置項之後會自動配置好根據 ESLint 的配置檔案來進行程式碼規範檢查。
我們開啟之前在 bin 目錄下建立的 index.js 檔案，然後寫一些不符合規範的程式碼，比如：
console.log('Hello Nue-CLI');
然後儲存之後會發現 IDEA 會提示我們的程式碼不符合規範，這樣就說明我們的程式碼規範檢查已經生效了，會爆紅！
解決辦法就是在檔案中滑鼠右鍵，然後選擇 Fix ESLint Problems，然後 IDEA 會自動幫我們修復程式碼。
可以看到我們的程式碼已經符合規範了。
這裡告訴大家一個 IDEA 設定小技巧，就是我們儲存程式碼的時候 IDEA 自動去執行 Fix ESLint Problems，這樣我們就不用手動去執行了。
開啟 IDEA 的設定，搜尋 save auto，找到 tools -> Actions on save，然後勾選 Run eslint --fix，這樣我們儲存程式碼的時候 IDEA 就會自動幫我們修復程式碼了。
好了本文就介紹這麼多，下一篇在來繼續實現我們自己的 Nue-CLI。