visual studio code 配置vue開發環境

 

本文針對的開發工具是vscode, 配合vue-cli創建的項目,保持開發環境的統一，需依照本文進行如下配置。

vscode版本：VSCodeUserSetup-x64-1.45.0.exe

一 配置相關環境

1.1 安裝nodejs

Vue項目通常通過webpack工具來構建，而webpack命令的執行是依賴node.js的環境的，所以首先要安裝node.js

nodejs版本：node-v12.16.3-x64

# 驗證是否安裝成功

node -v

1.2 配置淘寶鏡像

# 1 配置淘寶鏡像

       npm install -g cnpm --registry=https://registry.npm.taobao.org

# 2 設置環境變量

  找到cnpm.cmd所在目錄配置到環境變量path

# 3 驗證是否安裝成功

   cnpm -v

1.3 安裝webpack

# 安裝webpack

cnpm install webpack -g

# 查看webpack版本

webpack -v

二 安裝插件

需要安裝如下插件：

插件	功能
Vetur	高亮.vue文件，附帶有格式化功能，配合Eslint插件對代碼進行格式化檢查
Eslint	檢查你的js、html、css代碼，確保它們符合規范，並且代碼風格保持一致性，強制性的規則
Debugger for Chrome	代碼調試
koroFileHeader	在vscode中用於生成文件頭部注釋和函數注釋的插件

三 配置首選項

文件->首選項->設置，在settings.json下的【工作區設置】中添加以下配置：

{   .......

    "editor.formatOnType": true,         

    "editor.formatOnSave": true,        //保存時自動格式化

    ..........

    "fileheader.customMade": {             //生成頭部注釋配置

        "Description": "file information",

        "Author": "will",

        "Date": "Do not edit", // 文件創建時間(不變)

        "LastEditors": "will", // 文件最后編輯者

        "LastEditTime": "Do not edit" // 文件最后編輯時間

    },

    "vetur.format.defaultFormatter.html": "js-beautify-html",   //統一代碼風格

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            "wrap_attributes": "auto"

        },

        "prettyhtml": {

            "printWidth": 100,

            "singleQuote": false,

            "wrapAttributes": false,

            "sortAttributes": false

        }

    }

}

四 新建vue腳手架工程

4.1 安裝vue cli

# 安裝@vue/cli

cnpm install @vue/cli -g

# 查看vue-cli版本

vue --version

@vue/cli 4.3.1

4.2 創建項目

# 1 進入指定目錄

D:\vue

# 2 新建項目（注意項目名不能有大寫）

vue create nlp-partner-web

# 3 按 ↓ 選擇 “Manually select features”手動配置，再按 Enter

Vue CLI v4.3.1

? Please pick a preset:

  default (babel, eslint)

> Manually select features

# 4 選擇你需要的配置項，選擇完后按Enter鍵，（鍵盤上下鍵選擇，空格鍵選擇）

Vue CLI v4.3.1

? Please pick a preset: 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

# 5 選擇是否使用 history router，（選擇n）

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) (Y/n) n

# 6 選擇css 預處理器

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) No

? 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

# 7 選擇 Eslint 代碼驗證規則（提供一個插件化的 javascript 代碼檢測工具，這里選擇 ESLint + Prettier 按下Enter鍵）

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported

by default): Less

? Pick a linter / formatter config:

  ESLint with error prevention only

  ESLint + Airbnb config

  ESLint + Standard config

> ESLint + Prettier

# 8 選擇什么時候進行代碼規則檢測（建議選擇Lint on save）

Lint on save // 保存就檢測

Lint and fix on commit // fix和commit時候檢查

# 9 選擇如何存放配置（建議選擇package.json）

In dedicated config files // 獨立文件放置

In package.json // 放package.json里

# 10 最后提示選 y 是保存當前配置，按下Enter鍵等待創建

Vue CLI v4.3.1

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce

? Use history mode for router? (Requires proper server setup for index fallback

in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported

by default): Less

? Pick a linter / formatter config: Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i

? Pick additional lint features: Lint on save

? Where do you prefer placing config for Babel, ESLint, etc.? In package.json

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

4.3 運行項目

# 進入項目目錄

  cd nlp-partner-web

# 運行Vue項目

  npm run serve

# 打包項目

  npm run build

五 代碼調試

參考：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

六 常用快捷鍵

快捷鍵	說明
shift + alt + f	格式化代碼
ctrl+alt+i	添加頭部注釋
ctrl+alt+t	添加函數注釋