[指南] Vue 結合 ESLint 來格式化你的程式碼

章節連結

當多人團隊協作時,ESLint 的規範可以讓大家的程式碼風格趨於一致,再藉由 Visual Studio Code 內的套件和CLI ( Command Line Interface ) 指令的協助下,可以達成自動排版的功效。讓你在撰寫時還是可以維持多數自己的風格,排版這檔事就交給程式自動處理吧。
vue-integrated-eslint-to-format


步驟

1. 先用 Vue Cli 建立一個新專案,並在 Manually Select Features 中勾選 Linter / Formatter
2. 選擇 ESLint 和 Standard Config 即可 / 並選擇在 On Save 的時候就排版
3. 相關的 Babel, Eslint Config 檔,獨立拆出放在根目錄下 ( In dedicated config files )
4. 安裝 VS Code 上的 ESLint 套件,方便之後做整合 ( 為避免相關的套件衝突,請先行關閉其他相關功能套件 )
5. 關鍵檔案設定如下:

.eslintrc.js

settings.json ( VS Code)

package.json

由於 ESLint 的套件是抓取專案根目錄下的 .eslintrc.js 。若你的 .eslintrc.js 不在根目錄下,記得在專案根目錄下新增一個 .vscode 的資料夾,裡面新增一個 setting.json 的檔案。內容如下:

CSS 的排版需求可以解決嗎?

當然是可行的,僅需要搭配 Stylelint 工具即可。詳細說明請看這篇:[指南] Vue 結合 StyleLint 來統一你的 CSS 樣式

Github 原始碼

https://github.com/andy922200/vue-vuetify-eslint-babel-stylelint-integration


相關文章

1. eslint-plugin-vue Rules
2. Getting Started with ESLint
3. Vue.js – 使用 ESLint + Prettier 整理程式碼
4. [Vue] 整合 Vue style guide, eslint-plugin-vue 和 VSCode

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:18