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

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

下载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/

官网下载
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开发者必备。

image.png

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

image.png

3.Beautify
代码格式化

image.png

4.Auto Close Tag
自动闭合HTML标签

image.png

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

image.png

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

image.png

7.minapp
支持微信小程序标签、属性的智能补全

image.png

8.GitLens
可以查看代码提交记录

image.png
image.png

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

image.png

10.Easy LESS
平时开发写css比较麻烦,可以安装此插件,在目录中新建less文件进行开发,保存的时候自动回生成一个同名css文件,这样开发就方便多了,记得html引用的时候要引用css文件

image.png

11.cssrem

image.png

点击图示按钮,选择配置拓展设置,然后在Root Font Size设置基础值.例如ui设计图为750px,想要使用 vw将页面100等分,则1px=0.133rem(100/750),在使用的时候写10px时则会自动计算出1.3rem

image.png

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

image.png

【后续继续补充插件】

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

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

{
    "vue-template": {
        "prefix": "vue",
        "body": [
            "",
            "",
            "",
            "",
            ""
        ],
        "description": "my vue template"
    }
}

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

预先定义的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 的代码格式化

--点击为您加载更多--

关于作者: 共享博客

最新文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

1条评论