zoukankan      html  css  js  c++  java
  • window 10 vscode+vue配置

    一、下载并安装vscode

    下载地址:https://code.visualstudio.com/
    安装略...

    二、配置vscode

    1.设置中文,Ctrl+Alt+P 选择Configure Display language,选择中文简体安装后重启vscode


    2.vscode终端由默认的powershell改为git bash
    文件 -> 首选项 -> 配置,搜索shell:Window,点击在setting.json中编辑

    新增配置,注意前提是已经先装好Git,按Ctrl+~ 切换即可调出终端。如果还是powershell删除再重新添加终端

    "terminal.integrated.shell.windows": "C:\Program Files\Git\bin\bash.exe"
    

    三、vscode配置vue插件相关

    1、安装插件

    插件名 参考版本 备注
    Vetor 0.23.0
    Prettier 3.20.0 代码格式化
    ESLint 2.1.1

    2、vscode vue设置格式化,文件 -> 首选项-> 设置 -> 在setting.json中编译,复制以下代码,保存即可。
    功能:按Ctrl+s后自动格式化代码,用'代替",带换行没有分号等等

    {
      "workbench.colorTheme": "One Monokai",
      "editor.fontLigatures": true,
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
      ],
      "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
      },
      "files.exclude": {
        "node_modules/": true
      },
      "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
      },
      "editor.detectIndentation": false,
      "editor.tabSize": 2,
      "editor.formatOnSave": true,
      "eslint.autoFixOnSave": true,
      "prettier.semi": true,
      "prettier.singleQuote": true,
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned"
        }
      },
      "stylusSupremacy.insertColons": false, // 是否插入冒号
      "stylusSupremacy.insertSemicolons": false, // 是否插入分好
      "stylusSupremacy.insertBraces": false, // 是否插入大括号
      "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
      "stylusSupremacy.insertNewLineAroundBlocks": false,
      "diffEditor.ignoreTrimWhitespace": false, // 两个选择器中是否换行
      "window.zoomLevel": 0, // 两个选择器中是否换行
      /** Easy Sass 插件 **/
      "easysass.formats": [
        {
          "format": "expanded", // 没有缩进的、扩展的css代码
          "extension": ".css"
        }
      ],
      "easysass.targetDir": "./css/",
      "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
      },
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }, // 自定义css输出文件路径
      "powermode.enabled": true,
      "powermode.presets": "flames",
      "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
      },
      "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
      },
      "workbench.iconTheme": "vscode-icons"
    }
    

    四、安装nodejs

    下载地址:https://nodejs.org/en/



    安装完成后检查nodejs的版本:node -v

    在磁盘找创建一个文件夹用来专门存放后面需要用的npm包缓存,如 D: odejs下分别创建cache和global文件夹

    npm配置缓存全局缓存(在cmd命令下执行)

    npm config set prefix "D:
    odejsglobal"
    npm config set cache "D:
    odejscache"
    


    设置国内镜像,加速npm包

    npm config set registry=http://registry.npm.taobao.org
    


    更新npm包

    npm -v
    npm install npm -g
    


    系统环境变量Path加入global路径,如 D: odejsglobal

    安装vue-cli 3.0的版本,安装完成后在global文件可以看到对应的包

    npm install -g @vue/cli
    


    然后记得重启下电脑。

    五、常见问题解决

    1.npm run的时候出现报错:Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    问题原因是node-sass没安装好,需要重新安装,安装过程中有一步要从github.com下载东西,国内有时候github打不开,需要梯子!!

    npm install node-sass --registry=https://registry.npm.taobao.org
    

    2.npm run的时候出现报错:SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modulesfsevents)

    重新安装一下再试试npm run dev

    npm install fsevents --registry=https://registry.npm.taobao.org
    npm install fsevents@1.2.9 --registry=https://registry.npm.taobao.org
    
  • 相关阅读:
    macbook466加了两条1333金士顿正常
    spring 使用 groovy 的 utf8 问题
    jQuery Pagination Plugin Demo
    ssh 二级跳 转
    实战 Groovy: 用 curry 过的闭包进行函数式编程
    无刷新分页 jquery.pagination.js 张龙豪 博客园
    用fgets()函数从屏幕上输入一字符串_BenRuanChinaUnix博客
    What Is My IP Shows Your IP Address
    Chapter 24. Dynamic language support
    什么是SQA?
  • 原文地址:https://www.cnblogs.com/nickchou/p/12399151.html
Copyright © 2011-2022 走看看