前端工具VScode+NodeJs+Git下载配置

  • Post author:
  • Post category:其他


下载vscode需要用到

node

.js和

git

一、安装NodeJs

1.下载Nodejs

Node.js官网下载地址:https://nodejs.org/en/download/

Node.js历史版本下载地址:https://nodejs.org/zh-cn/download/releases/

tips:脚本语言需要一个解析器才能运行,

javascript

是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言,浏览器是它的解析器角色。而对于需要独立运行的JS,nodejs就是一个解析器。

2.安装

安装的时候除了安装的路径修改为非系统盘外,其他默认。我安装到D:Program Filesnodejs,默认情况下会安装

npm

(Node Package Manager),是一个项目依赖库的管理工具。

3.检测是否安装成功

打开命令行或者在vscode里“终端新建终端”,在终端输入命令

node -v     //会输出当前node的安装版本
npm -v      //会输出当前npm的安装版本

二、安装Git

实际项目开发中,我们经常会用一些版本控制器来托管自己的代码

git官网下载地址:https://git-scm.com/downloads

可视化代码提交工具(小章鱼)

GitKraken 客户端:https://www.gitkraken.com/download

多分支提交步骤:

1.个人分支commit(push)

2.切换到master主分支pull

3.主分支meger到个人分支(如果没有错误)

4.个人分支meger到主分支

5.主分支push

Git常用命令和常见问题

三、安装VScode

VSCode一款免费

开源

的现代化轻量级代码编辑器,

前端

开发一大利器。

vscode官网下载地址:https://code.visualstudio.com/

前端工具VScode+NodeJs+Git下载配置插图

官网下载

1.设置中文语言

-使用快捷键【Ctrl+Shift+P】,弹出的搜索框中输入【configure language】

-然后选择搜索出来的【Configure Display Language】,locale的属性值为“zh-CN”

-安装插件名为【Chinese (Simplified)Language Pack for Visual Studio Code】

-重启VSCode软件生效。

2.插件列表

1.Vetur

vue

多功能集成插件,包括:语法高亮,智能提示,Vue开发者必备。

前端工具VScode+NodeJs+Git下载配置插图(1)

image.png

2.vscode-icons

资源目录加上图标,增加不同文件类型辨识度,必备

前端工具VScode+NodeJs+Git下载配置插图(2)

image.png

3.Beautify

代码格式化

前端工具VScode+NodeJs+Git下载配置插图(3)

image.png

4.Auto Close Tag

自动闭合HTML标签

前端工具VScode+NodeJs+Git下载配置插图(4)

image.png

5.ESLint

javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,得连续按住Ctrl+s才可以

前端工具VScode+NodeJs+Git下载配置插图(5)

image.png

6.Prettier – Code formatter

只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

前端工具VScode+NodeJs+Git下载配置插图(6)

image.png

7.minapp

支持

微信小程序

标签、属性的智能补全

前端工具VScode+NodeJs+Git下载配置插图(7)

image.png

8.GitLens

可以查看代码提交记录

前端工具VScode+NodeJs+Git下载配置插图(8)

image.png

前端工具VScode+NodeJs+Git下载配置插图(9)

image.png

9.Code Runner

可以单独运行JS文件,在JS代码页面鼠标右键点击Run Code,即可输出JS运行结果

前端工具VScode+NodeJs+Git下载配置插图(10)

image.png

10.Easy LESS

平时开发写

css

比较麻烦,可以安装此插件,在目录中新建

less文件

进行开发,保存的时候自动回生成一个同名

css文件

,这样开发就方便多了,记得

html

引用的时候要引用

css文件

前端工具VScode+NodeJs+Git下载配置插图(11)

image.png

11.cssrem

前端工具VScode+NodeJs+Git下载配置插图(12)

image.png

点击图示按钮,选择

配置拓展设置

,然后在

Root Font Size

设置基础值.例如ui设计图为750px,想要使用

vw

将页面100等分,则

1px=0.133rem



(100/750)

,在使用的时候写

10px

时则会自动计算出

1.3rem

前端工具VScode+NodeJs+Git下载配置插图(13)

image.png

可以自动根据px计算出对应的rem值,安装完此插件,及得重启vscode!否则不生效!

前端工具VScode+NodeJs+Git下载配置插图(14)

image.png

【后续继续补充插件】

3.创建用户代码片段(vue)

文件—>首选项—>用户代码片段, 然后再弹出的输入框中输入vue,然后回车(Enter)



vue.js

on中写上代码片段,代码如下

{
    "vue-template": {
        "prefix": "vue",
        "body": [
            "
   
   
    
    ",
            "

    
    
", "
", " ", "", "" ], "description": "my vue template" } }

使用的时候输入vue,会自动提示,按下回车键就可以快速生成预先定义的代码片段了

前端工具VScode+NodeJs+Git下载配置插图(15)

预先定义的vue代码片段

注意:此处配置了sass,所以在style中定义了lang=‘scss’,要是不使用scss,可以在vue.json文件中去掉即可。

vue项目sass-loader安装可参考:vue项目sass-loader安装

用户代码片段可参考好基友文章:使用vs code创建vue/

HTML5

-vue代码片段

4.1settings.json中配置(一)(配置用户代码片段时也可以使用)
{
    "update.mode": "manual",
    "editor.formatOnSave": true,  // #每次保存的时候是否自动格式化 
    "editor.fontSize": 14,
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "editor.fontWeight": "bold",
    "editor.lineHeight": 18,
    "editor.letterSpacing": 0,
    "editor.tabSize": 2,   // 重新设定tabsize
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.wordWrap": "on",
    "editor.renderLineHighlight": "gutter",
    "editor.roundedSelection": true,
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,
    "editor.DragAndDrop": false,
    "editor.minimap.showSlider": "mouSEOver",
    "editor.minimap.renderCharacters": false,
    "editor.minimap.maxColumn": 90,
    "editor.cursorStyle": "line-thin",
    "editor.cursorBlinking": "expand",
    "editor.quickSuggestions": {
        "strings": true
    },
    "window.titleBarStyle": "native",
    "window.menuBarVisibility": "visible",
    "window.zoomLevel": 0,
    "window.title": "${rootName} - ${dirty}${activeEditorLong}",
    "workbench.colorTheme": "Monokai",
    "workbench.startupEditor": "welcomePage",
    "workbench.activityBar.visible": true,
    "workbench.statusBar.visible": true,
    "workbench.sideBar.location": "left",
    "workbench.editor.enablePreview": false,
    "workbench.editor.tabSizing": "fit",
    "workbench.colorCustomizations": {
        // "statusBar.background": "#333333",
        // "statusBar.foreground": "#adadad",
        "terminal.background": "#000000",
        "terminal.foreground": "#FFFFFF"
    },
    "breadcrumbs.enabled": false,
    "breadcrumbs.symbolPath": "off",
    "explorer.openEditors.visible": 0,
    "files.encoding": "utf8",
    "files.eol": "rn",
    "files.hotExit": "onExit",
    "files.autoSave": "off",
    "extensions.autoUpdate": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "wxml": "html"
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    //path
    "git.path": "D:\Git\bin\git.exe",
    "terminal.integrated.shell.windows": "C:\Windows\sysnative\cmd.exe",
    //px to rem
    "px-to-rem.px-per-rem": 75,
    "px-to-rem.only-change-first-ocurrence": false,
    "px-to-rem.number-of-decimals-digits": 10,
    "px-to-rem.notify-if-no-changes": true,
    //npm-scripts
    "npm-scripts.showStartNotification": false,
    //simpleIcons
    "simpleIcons.hIDEArrows": false,
    //vetur
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"   //force-aligned:保存格式化换行  auto:保存格式化不换行
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "search.followSymlinks": false,
    "workbench.iconTheme": "vscode-icons",
    "eslint.autoFixOnSave": true, // #每次保存的时候将代码按eslint格式进行修复
    "eslint.validate": [
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "wpy",
            "autoFix": true
        }
    ],
    "prettier.eslintIntegration": true, // #让prettier使用eslint的代码格式进行校验
    "prettier.semi": false, //#是否显示代码最后一行的分号
    "prettier.singleQuote": true, //#使用单引号替代双引号
    "editor.formatOnType": true, //#让函数(名)和后面的括号之间加个空格
    "files.associations": {
        "*.wpy": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "minapp-vscode.disableAutoConfig": true,
    "vetur.validation.template": false
}
4.2 settings.json中配置(二)

注: 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考,然后结合自己的需求去配置。如果没有特殊需求,也可以拿去直接用

此配置文件需要安装以下几个vscode 扩展程序:ESLint 、Prettier – Code formatter、Vetur

{
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 保存时格式化
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  "prettier.semi": false,
  // prettier 设置强制单引号
  "prettier.singleQuote": true,
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  // 设置 eslint 保存时自动修复
  "eslint.autoFixOnSave": true,
  // eslint 检测文件类型
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }
}

此配置参考:vscode 的代码格式化



版权声明:本文为qmzma原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。