Vue - VSCode 基本配置 ESLine & Prettier 代碼自動風格化

Vue - VSCode 基本配置 ESLine & Prettier 代碼自動風格化

這裡記錄 Vue 初始設定會用到的一些基本設定

包括語法亮潔以及代碼自動風格化設定．

另外會提到如何在 VSCode settings.json 設定儲存自動將語法進行整理，風格化

Vetur

在 VS Code 安裝 Vetur擴充，支援 Vue 語法高亮潔，自動填充手腳架

Vue 2 Snippets

vue 代碼 auto complete

ESLint & Prettier

分別安裝 ESLint 與 Prettier 套件

安裝

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

接著進行以下設定：

首先，設定讓 ESLine 支援 Pretter，於 vue 專案根目錄開啟 .eslintrc.js 的 extends

CVT2HUGO: 加入 ``` plugin:prettier/recommended ```
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
		...
    'plugin:prettier/recommended',
    ...

接著，在根目錄建立 .prettierrc.js ，設定將雙引號轉為單引號

module.exports = {
	singleQuote: true,
}

接著，設定讓 ESLine 於檔案儲存時，自動修正語言格式

創建本地 VSCode Settings.json

在這裏，建議在每個專案進行設定 VSCode settings.json 設置

只要在本地專案根目錄建立資料夾 .vscode ，並且新增檔案 settings.json

就可以覆蓋全域的 settings.json

(這裡是針對專案進行 VSCode settings.json 設定，你也可視需求直接設定在 VSCode 全域 settings.json)

在 settings.json 加入以下項目

{
		"files.trimFinalNewlines": true, //刪除多餘空白
    "files.insertFinalNewline": true,//結尾保留一個空白
    "eslint.autoFixOnSave": true,//儲存時自動執行 ESLint 格式化
    "vetur.validation.template": false,
    "editor.formatOnSave": true,
}

設定完成後，記得將這個設定檔案也加入版控，以方便專案相關成員共用設定

git add -f .vscode/setting.json

Vue 初始化設定選項

首先，創建 Vue

vue create myapp

選擇

default (babel, eslint)
> Manually select features

接著選擇下列功能（依照需求選擇)

? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
❯◉ E2E Testing

詢問是否使用 vue route history model ，這裡選 n

ue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)n

選擇 CSS pre-processor （依照需求選取)

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

選取 ESLint + Prettier

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier

選取 Line on save

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

Test Solution (視需求選取)

? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai
  Jest

設定 E2E testsolution (視需求選取)

? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only)
  Nightwatch (WebDriver-based)

選取設定方式

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files
  In package.json

是否下次沿用設定，這裡我都會選N

如果選擇y，則會將設定存在 .vuerc

? Save this as a preset for future projects? (y/N) N

以上設定，再啟動 serve

編輯代碼時，就會自動進行排版及風格化