ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【前端开辟情况配置】VS Code、Node、npm、git [打印本页]

作者: 伤心客 时间: 2025-1-4 16:43
标题: 【前端开辟情况配置】VS Code、Node、npm、git
编辑器

VS Code

官网下载

https://code.visualstudio.com/Download

Next 安装

同意协议，下一步 >> 选择安装路径，下一步 >> （选择开始菜单文件夹）下一步 >>（选择附加任务）下一步 >> 安装
插件保举

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code ：汉化
ESLint：服从肯定代码规范
Prettier - Code formatter：主动格式化代码
Auto Close Tag：输入标签的时候，主动竣事标签
Auto Rename Tag：修改标签时，主动更改匹配开始/竣事标签
Path Intellisense：主动补全文件路径
Code Spell Checker：拼写检查
GitLens — Git supercharged：Git插件，显示每一行代码的最后提交信息
Color Highlight：高亮显示颜色代码
vscode-icons：文件图标主题化
Image preview：预览图片
Simple React Snippets：提供react代码片段
JavaScript (ES6) code snippets：提供ES6 语法片段
ES7+ React/Redux/React-Native snippets：提供React、Redux、React Native 语法代码片段
vetur：Vue插件，提供语法高亮，主动补全，错误检查，代码格式化
HTML CSS Support：html、css插件
Error Lens：显示代码中的语法错误、warning以及其他问题
CSS Peek：选择某个 class 或者 id 名称，按住Ctrl键+鼠标左键，定位到该名称的CSS的位置
Live Server：本地服务器插件，启动本地服务器并实时预览网页
Typescript React Code Snippets：使用 Typescript 的 React 代码片段
React Native Tools：为React Native 项目提供开辟情况
Vue VScode Snippets
Better Comments
open in browser
...

其他编辑器：HBuilder X、 WebStorm
JavaScript运行情况

浏览器

Google Chrome 浏览器（开辟必备官网下载地址）
Microsoft Edge 浏览器（IE浏览器的替换）
Firefox 浏览器（火狐浏览器，主要使用在Linux）
Safari 浏览器（Mac自带）
...

Node.js

官网下载

https://nodejs.org/en

其他版本下载 https://nodejs.org/en/download/prebuilt-installer

Next 安装

留意修改安装路径（不要安装在任何中文目录下），不停 Next 操作即可
测试是否安装成功：
按下【win+R】键，输入cmd，打开cmd窗口，输入
node -v // 显示当前node版本，显示版本Node.js安装成功
npm -v // 显示npm版本，显示版本npm安装成功（node.js内置管理包工具npm）
情况配置

（下载插件默认位置是C盘，比力占内存，所以进行情况配置，修改文件下载位置。看个人需求要，不进行如下操作也可正常使用Node.js）
1. 找到Node.js安装目录，在安装目录下新建 node_global 文件夹和 node_cache 文件夹

2. 新建后，使用管理员身份打开 cmd窗口, 切换到Node.js安装目录

（1）输入 npm config set prefix "Node安装路径\node_global" （配置缓存位置）
（2）输入 npm config set cache "Node安装路径\node_cache"（配置存放位置）
（3）检查配置：输入 npm config get prefix 和 npm config get cache

3. 情况变量配置
（1）此电脑 >> 单击右键，选择属性 >> 高级体系设置 >> 高级 >> 情况变量
>> 用户变量
<1> 编辑用户变量中Path，修改为 node_global的路径，确定

>> 体系变量
<1> 新建，添加如下体系变量，确定
(在刚才新建node_global目录下新建node_modules文件夹，再添加)

变量名：NODE_PATH
变量值：Node安装路径\node_global\node_modules

<2> 编辑体系变量中的Path，新建，添加 %NODE_PATH% （Node.js安装位置），确定

>> 确定 >> 确定

4.文件权限设置
找到 Node.js 安装根目录 >> 属性 >> 安全>> 编辑 >> 选择 Authenticated Users，勾选完全控制，应用，确定 >> 确定

管理包工具

npm

node.js已内置管理包工具npm，无需再下载
安装镜像

安装淘宝镜像：npm config set registry https://registry.npm.taobao.org
检查，查看源：npm config get registry
npm 常用使用下令

npm -v // 查看npm版本
npm init // 初始化，新项目会创建package.json文件
npm install // 根据package.json文件中dependencies配置安装全部的依赖包
npm install 模块名称 // 下载安装依赖到本地目录node_modules下
npm install --global 模块名称 // 下载安装依赖到全局情况中
npm install 模块名称 -S // -S 生产阶段的依赖（会将安装包信息添加到package.json文件dependencies对象中）
npm install 模块名称 -D // -D 开辟阶段的依赖（会将安装包信息添加到package.json文件devDependencies对象中）
npm uninstall moudleName // 卸载依赖
npm cache verify // 清算缓存
npm cache clean --force // 强制清算缓存

yarn

npm下令安装

npm i yarn -g
项目管理工具

git

官网下载

https://git-scm.com/downloads

下载失败办理（无授权/下载慢）

1.镜像下载

windows体系：
https://registry.npmmirror.com/binary.html?path=git-for-windows

2.复制链接后，使用迅雷下载

Next 安装

没有修改，不停Next操作即可，以 git 2.47.1安装为例
Next >> 修改安装路径，Next >> Next >> Next >>（选择文本编译器），Next

>>（调整初始分支的名称）， Next

>> Next >> Next >> Next >> windows体系选择第一个， Next

>> Next >> Next >> Next >> Install
git 常用使用下令

1.配置用户信息，初始化

git config --global user.name "用户名" //（加 global 全局配置）
git config --global user.email "邮箱"
gIt config -I // 查看配置
git init // 建立全新仓库，初始化
git clone 项目地址毗连 // 克隆远程项目，拉项目

2.创建&&提交

git add . // 暂存全部到暂存区
git add 文件名 // 暂存指定文件到暂存区
git commit -m "commit信息" // 提交commit，暂存区内容提交到本地仓库
git reset --soft HEAD^ // 取消暂存，打消最近一次commit
git push origin 分支名 // 上传推送分支至远程仓库

3.其他常用下令
按q竣事退出

git pull // 更新代码
git pull origin 分支名 // 更新拉取指定分支
git branch // 查看全部本地分支
git branch -r // 查看全部远程分支
git branch 分支名 // 新建分支，不会切换到新分支
git checkout 切换的分支 // 切换分支
git checkout - b 创建的分支名 origin/基于的分支名 // 基于xxx分支创建新分支，并切换
git merge 分支 // 合并指定分支到当前分支

必要另一分支上全部变更，少量变更可用 git cherry-pick 实现

git cherry-pick commitId // 引入提交，会主动commit,需先查看commitId（可bitbucket查看）
git cherry-pick commitId1 commitId2 ... commitIdn // 引入多个commit提交
git cherry-pick commitId -n // 引入提交，-n 模式不会主动commit
git cherry-pick --abort // 放弃git cherry-pick变更
git branch -d 删除分支 // 删除本地分支
git status // 查看状态
git log // 查看日记（提交记载）
git reflog // 查看更多日记
git reset --hard 版本号 // 版本回退（git log 查看 commit）
git stash // 将工作区修改代码（未 git add 和 git commit 操作）暂存到某处，还原工作区
git stash list // 查看stash暂存记载
git stash pop // 恢复stast@{0}（最近一次暂存）到工作区
git stash clear // 清空全部暂存

本地有修改需暂时切分支可 git stash 后 git checkout xxx切换在git stash pop 恢复

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)