關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

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

分別安裝 ESLintPrettier 套件

接著進行以下設定:

首先,設定讓 ESLine 支援 Pretter,於 vue 專案根目錄開啟 .eslintrc.jsextends 加入 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

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


如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦