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

下载vscode需要用到node.jsgit

一、安装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里“终端新建终端”,在终端输入命令

二、安装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下载配置
image.png

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

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

3.Beautify
代码格式化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11.cssrem

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

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

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

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

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

【后续继续补充插件】

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

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

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

前端工具VScode+NodeJs+Git下载配置
预先定义的vue代码片段

注意:此处配置了sass,所以在style中定义了lang=‘scss’,要是不使用scss,可以在vue.json文件中去掉即可。
vue项目sass-loader安装可参考:vue项目sass-loader安装
用户代码片段可参考好基友文章:使用vs code创建vue/HTML5-vue代码片段

4.1settings.json中配置(一)(配置用户代码片段时也可以使用)

4.2 settings.json中配置(二)

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

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

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

未经允许不得转载:一点博客-青梅煮码-共享博客 » 前端工具VScode+NodeJs+Git下载配置
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏