vue2 项目 vscode 配置

安装node.js
1. 下载https://nodejs.org/zh-cn/download/ 安装到目录D:\nodejs（自定义，不能有空格、中文、特殊字符）
2. 配置环境变量，将安装目录加入Path环境变量
3. 配置npm
  1. 在安装目录新建 node_cache 和 node_global 两个文件夹，并将node_global路径加入Path环境变量
    bash 复制代码
```
   //配置全局模块存放路径
   npm config set prefix "D:\nodejs\node_global"
   //配置缓存文件存放路径
    npm config set cache "D:\nodejs\node_cache"
```
  2. 使用阿里镜像：
    bash 复制代码
```
npm install --registry=https://registry.npm.taobao.org
```
  3. npm config set msvs_version 2015
安装python2
1. 下载python 2.7.17 并安装，位置D:\Python27。
2. 配置环境变量变量名：python2，变量值：D:\Python27
安装包
1. 全局安装 eslint 包
  bash 复制代码
```
     //安装
     npm i -g eslint
     //检查是否安装成功，列出已安装的包
     npm -g ls
```
2. 全局安装 prettier 包
  bash 复制代码
```
     //安装
     npm i -g prettier
     //检查是否安装成功，列出已安装的包
     npm -g ls
```
3. 安装 eslint-config-prettier
  使eslint可以使用prettier格式配置，解决eslint，prettier冲突
4. 安装 eslint-plugin-prettier
  使eslint可以提示prettier格式化错误
5. 安装 eslint-plugin-vue
  使eslint可以校验.vue,.js中的<template> 和<script>元素
下载 vs code
安装插件
1. 必装
  - eslint：代码质量检查，代码风格检查工具
  - prettier：代码格式化工具，和eslint会有格式配置冲突
  - vetur：vue代码高亮显示，提示，格式化工具
  - chinese：中文语言包
  - vscode-icons：图标主题
  - Git Graph：类似eclipse 分支图
  - Git History：查看文件历史记录
  - Local History：本地修改记录
2. 可装：
  - Open in Browser：在浏览器中打开
  - Regex Previewer：预览正则表达式效果
  - npm Intellisense：npm 自动代码提示、补充
  - Turbo Console Log：自动console.log
  - CSS Peek：查看css定义（vue css定位不到）
  - Path Intellisense：路径和文件名提示、补充
  - Auto Rename Tag：自动重命名标签
  - Code Spell Checker：单次拼写错误提示
  - Svg Preview：svg图片预览
  - vscode-pigments：实时预览设置的颜色
  - Image preview：引入路径为图片时，可以实时预览
  - Project Manager：多项目切换工具
  - vue-helper：跳转查看element-ui源码
vue 调试配置
1. 安装 Vue.js devtools 浏览器插件

新建或修改jsconfig.json文件（解决路径问题）

json 复制代码

    {
        "include": [
          "./src/**/*"
        ],
        "compilerOptions": {
            "baseUrl": ".",
            "paths": {
                "@/*": [
                    "src/*"
                ]
            }
        },
         "exclude": ["node_modules", "dist", "build","prodDist"]
    }

配置文件修改

文件-> 首先项->配置文件->显示内容/创建配置文件->打开或创settings.json，内容如下。（如果失败则直接编辑系统中的settings.json文件）

json 复制代码

   
        {
          // 是否允许自定义的snippet片段提示
          "editor.snippetSuggestions": "top",
          // vscode默认启用了根据文件类型自动设置tabsize的选项
          "editor.detectIndentation": false,
          // 重新设定tabsize
          "editor.tabSize": 4,
          // #每次保存的时候自动格式化
          "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
          },
          // #每次保存的时候将代码按eslint格式进行修复
          "editor.fontWeight": "400",
          "editor.formatOnType": false,
          "git.confirmSync": false,
          "team.showWelcomeMessage": false,
          "window.zoomLevel": 0,
          // "editor.renderWhitespace": "boundary",
          "editor.renderWhitespace": "none",
          "editor.cursorBlinking": "smooth",
          "editor.minimap.enabled": true,
          "editor.minimap.renderCharacters": false,
          "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
          "editor.codeLens": true,
          //eslint 代码自动检查相关配置
          "eslint.enable": true,
          "eslint.run": "onType",
          "eslint.options": {
            "extensions": [".js", ".vue"]
          },
          // 添加 vue 支持
          "eslint.validate": ["javascriptreact", "vue", "javascript", "html"],
          // #让prettier使用eslint的代码格式进行校验
          "prettier.eslintIntegration": true,
          // #这个按用户自身习惯选择
          "vetur.format.defaultFormatter.html": "prettier",
          // #让vue中的js按编辑器自带的ts格式进行格式化
          "vetur.format.defaultFormatter.js": "prettier",
          "explorer.confirmDelete": false,
          "files.associations": {
            "*.cjson": "jsonc",
            "*.wxss": "css",
            "*.wxs": "javascript",
            "*.tpl": "html"
          },
          "emmet.includeLanguages": {
            "wxml": "html"
          },
          "window.menuBarVisibility": "visible",
          "git.enableSmartCommit": true,
          "git.autofetch": true,
          "liveServer.settings.donotShowInfoMsg": true,
          "javascript.updateImportsOnFileMove.enabled": "always",
          "editor.fontSize": 14,
          "search.followSymlinks": false,
          "workbench.sideBar.location": "left",
          "zenMode.restore": true,
          "breadcrumbs.enabled": true,
          "editor.formatOnPaste": false,
          "editor.cursorStyle": "line-thin",
          "eslint.codeAction.showDocumentation": {
            "enable": true
          },
          "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
          },
          "[scss]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
          },
          "[css]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
          },
          "terminal.integrated.tabs.enabled": true,
          "editor.rulers": [],
          "auto-rename-tag.activationOnLanguage": [
            "html",
            "xml",
            "php",
            "javascript",
            "vue",
            "*"
          ],
          "editor.fontLigatures": false,
          "workbench.iconTheme": "vscode-icons",
          "git-graph.commitDetailsView.fileView.type": "File List",
          "git-graph.commitDetailsView.location": "Docked to Bottom",
          "git-graph.defaultColumnVisibility": {
            "Date": true,
            "Author": true,
            "Commit": true
          },
          // 本地历史记录保存位置
          "local-history.path": "D:\\vscode_local_history",
          //打开文件时，默认进入编辑模式
          "workbench.editor.enablePreview": false,
          "npm.exclude": "",
          "editor.formatOnSave": true,
          "git.suggestSmartCommit": false,
          "git-graph.dialog.rebase.launchInteractiveRebase": true,
          "projectManager.git.baseFolders": ["D:\\vscode_git"],
          "[json]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[vue]": {
            "editor.defaultFormatter": "octref.vetur"
        }
        }