獨立使用ESLint+Prettier對代碼進行格式校驗

前言

寫Vue項目時，使用CLI搭建項目，勾選上ESLint+Prettier就會自動幫咱們配置好，最近寫的代碼脫離了webpack，想規範本身的代碼格式，搜了不少文章，大都是基於webpack的。

通過我一番折騰後，終於搞出了不須要webpack就能讓編輯器結合ESLint對代碼進行格式校驗，接下來就跟你們分享下個人實現過程，歡迎各位感興趣的開發者閱讀本文。

環境搭建

本文使用的編輯器器是WebStorm，採用的包管理工具是yarn。

安裝ESLint

開始以前，先跟你們看下個人項目結構，是一個很簡單的js項目。

• 初始化一個項目

# 項目根目錄執行，執行後填寫相關信息，初始化成功後，項目根目錄會多一個package.json文件
yarn init
複製代碼

• 安裝依賴

# 項目根目錄執行，執行完成後項目根目錄會多一個yarn.lock文件
yarn install
複製代碼

• 安裝ESLint

# 項目根目錄執行
yarn add eslint --dev
複製代碼

• 初始化ESLint

# 項目根目錄執行
yarn eslint --init
# 執行後，會出現以下選擇
# 你想如何使用ESLint，我選擇第二項校驗代碼和解決方案
✔ How would you like to use ESLint? · problems
# 使用什麼做爲項目模塊，我選擇import/export
✔ What type of modules does your project use? · esm
# 項目使用哪一個框架，我選擇第三項不使用框架
✔ Which framework does your project use? · none
# 項目是否使用typescript，我選擇yes
✔ Does your project use TypeScript? · No / Yes
# 代碼運行環境，我選擇了瀏覽器和node
✔ Where does your code run? · browser, node
# eslint配置文件的格式，我選擇json配置格式
✔ What format do you want your config file to be in? · JSON
# 是否安裝以下依賴
The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest # 這裏選擇no，一會本身安裝缺乏的依賴 ✔ Would you like to install them now with npm? · No / Yes Successfully created .eslintrc.json file in /Users/likai/Documents/WebProject/JavaScript-test ✨ Done in 85.77s. 複製代碼

• 安裝插件讓ESLint支持TypeScript

yarn add typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
複製代碼

執行完上述步驟後，項目目錄以下圖所示

安裝prettier

• 安裝插件

yarn add prettier --dev
複製代碼

• 配置prettier規則，項目根目錄建立.prettierrc.json文件，添加下述代碼

{
  "printWidth": 160, // 每一行的代碼字符
  "tabWidth": 4, // tab的長度
  "useTabs": true, // 使用tab
  "singleQuote": false, // 使用單引號代替雙引號
  "semi": true, // 末尾分號
  "trailingComma": "none", // 刪除數組末尾逗號
  "bracketSpacing": true // 大括號之間的空格
}
複製代碼

配置編輯器

配置ESLint

• 打開webstorm的設置面板，按照圖中所示進行設置

• 在eslint配置文件處右擊，按照圖中所示進行操做

配置prettier

• 打開webstorm的設置面板，按照圖中所示進行設置

結合ESLint與prettier

單獨使用ESLint須要在其配置文件中額外配置不少規則，而這些規則又大多爲prettier的默認規則或者咱們已經在prettier配了一份，這樣就會形成重複寫的狀況且維護成本較大。

幸虧插件的做者已經想到了這一點，出了一個名爲eslint-plugin-prettier的插件。經過下屬命令進行安裝

yarn add eslint-plugin-prettier --dev
複製代碼

• 打開.eslintrc.json添加prettier插件和規則rules規則

"plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error", // prettier標記的地方拋出錯誤信息
        "spaced-comment": [2,"always"] // 註釋後面必須寫兩個空格
    }    
複製代碼

加入上述配置後，大概能夠省略以下配置:

更多配置

本文只介紹ESLint和prettier的入門使用，更多配置請移步：

ESLint文檔: ESLint

Prettier文檔: Prettier

結果測試

隨便打開一個ts文件，咱們發現已經有eslint的相關提示了。

測試下自動格式化代碼，如圖所示寫完代碼後按Ctrl+S便可自動格式化

寫在最後

• 文中若有錯誤，歡迎在評論區指正，若是這篇文章幫到了你，歡迎點贊和關注😊
• 本文首發於掘金，未經許可禁止轉載💌