如何使用 VS Code 開發 Vue ?
VS Code 是目前最受歡迎的前端開發環境，只要安裝合適的套件，就能在 VS Code 開發 Vue，適合前後端分離時的純前端開發。
Version
macOS High Sierra 10.14.2
VS Code 1.30.1
Vue 2.5.21
Vue CLI 3.2.2
Vetur 0.14.4
Prettier 1.7.3
ESLint 1.7.12
Copy Relative Path 0.0.2
VS Code 1.30.1
Vue 2.5.21
Vue CLI 3.2.2
Vetur 0.14.4
Prettier 1.7.3
ESLint 1.7.12
Copy Relative Path 0.0.2
Packages
- Vetur
- Prettier
- ESLint
- Copy Relative Path
Vetur
負責 Vue 的 LSP (Language Service Protocol) 角色，是目前支援 Vue 最完整的 LSP。
ESLint
負責 Linter 角色，Vue CLI 3 目前已經整合 ESLint，除了另外下
yarn lint 執行 ESLint 外，更可以在 VS Code 下即時警告。Prettier
負責 Formatter 角色，當我們按下熱鍵
Ctrl + S 時，會啟動 Prettier 為我們重整 JavaScript / CSS 格式。Copy Relative Path
在 ECMAScript 2015 中，非常依賴 import module，此 package 可以幫我們自動產生相對路徑。
.eslintrc.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/essential', 'plugin:prettier/recommended', '@vue/prettier', ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', }, parserOptions: { parser: 'babel-eslint', }, }; |
在典型 Vue project 根目錄下，都有
.eslintrc.js，用來設定 ESLint。
第 8 行
1
| 'plugin:prettier/recommended',
|
新增此行，讓 Prettier 支援 ESLint。
.prettierrc.js
1 2 3 | module.exports = { singleQuote: true }; |
在 Vue project 根目錄新增
.prettierrc.js，用來設定 Prettier。
當字串使用
雙引號，Prettier 會自動改成 單引號。VS Code Settings
- 熱鍵
Ctrl + ⇧ + P，輸入json - 選擇
Preferences: Open Settings (JSON)
settings.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | "vetur.validation.template": false, "eslint.validate": [ { "language": "vue", "autoFix": true }, { "language": "html", "autoFix": true }, { "language": "javascript", "autoFix": true } ], "eslint.autoFixOnSave": true, "editor.formatOnSave": true |
新增以上設定。
第 1 行
1
| "vetur.validation.template": false,
|
關閉 Vetur 的 Linter 功能，改用 ESLint + Prettier。
第 2 行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | "eslint.validate": [ { "language": "vue", "autoFix": true }, { "language": "html", "autoFix": true }, { "language": "javascript", "autoFix": true } ], |
設定 ESLint 要檢查哪些語言：
Vue、HTML 與 JavaScript，並寫自動修正。
16 行
1
| "eslint.autoFixOnSave": true,
|
按熱鍵
Ctrl + S 或自動存檔時，ESLint 將自動修正。
17 行
1
| "editor.formatOnSave": true
|
當存檔時會自動排版。
Conclusion
- 使用 Vue CLI 建立 project 時，建議選擇
ESLint + Prettier - 要自動排版時，只要按
Ctrl + S就會執行 ESLint + Prittier
留言
張貼留言