vue2 项目 vscode 配置

  1. 安装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

  2. 安装python2

    1. 下载python 2.7.17 并安装,位置D:\Python27。
    2. 配置环境变量 变量名:python2,变量值:D:\Python27
  3. 安装包

    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>元素

  4. 下载 vs code

  5. 安装插件

    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源码
  6. vue 调试配置

    1. 安装 Vue.js devtools 浏览器插件
  7. 新建或修改jsconfig.json文件(解决路径问题)

    json 复制代码
        {
            "include": [
              "./src/**/*"
            ],
            "compilerOptions": {
                "baseUrl": ".",
                "paths": {
                    "@/*": [
                        "src/*"
                    ]
                }
            },
             "exclude": ["node_modules", "dist", "build","prodDist"]
        }
  8. 配置文件修改

    文件-> 首先项->配置文件->显示内容/创建配置文件->打开或创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"
            }
            }
相关推荐
罗政6 小时前
冒险岛079 V8 整合版源码搭建教程+IDEA启动
java·ide·intellij-idea
艾斯比的日常8 小时前
VSCode 实用快捷键
ide·vscode·编辑器
Galaxy_12298 小时前
vscode远程报错:Remote host key has changed,...
ide·vscode·编辑器
彬sir哥8 小时前
VScode运行后出现黑窗口
vscode·运行·黑窗口
Hi~晴天大圣13 小时前
Pycharm中断点使用技巧
ide·python·pycharm
且随疾风前行.14 小时前
Android Studio 提示 !Failed to initialize editor
android·ide·android studio
比牛顿更懂PID15 小时前
VSCode本地python包“无法解析导入”
ide·vscode·python
qxyywy17 小时前
CUDA 安装 一直卡在Installing Nsight Visual Studio Edition
ide·visual studio·cuda
前端郭德纲18 小时前
vscode默认终端怎么设置成git bash
git·vscode·bash
瞌睡不来19 小时前
(学习总结25)Linux工具:vim 编辑器 和 gcc/g++ 编译器
linux·学习·编辑器·vim·编译器·gcc/g++