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	添加函数注释