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

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

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

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

Vetur

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

Vue 2 Snippets

vue 代碼 auto complete

ESLint & Prettier

安裝

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

npm install --save-dev --save-exact prettier

接著進行以下設定：

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

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

? 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 to select, to toggle all,

>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

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

聲明，近期發現有平台大量盜用文章內容，若您發現內文非來自關於網路那些事 [https://adon988.logdown.com](https://adon988.logdown.com) ，希望您與我聯繫 [https://www.facebook.com/ThinkingWebsite](https://www.facebook.com/ThinkingWebsite)

(本文章源自"關於網路那些事)

最後，如果你喜歡這篇文章，請幫忙點個讚

Tweet