【前端开发环境配置】VS Code、Node、npm、git_vscode npm
编辑器
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
- ...
vscode终端使用npm报错情况（node配置了环境变量）
解决办法：删掉这个文件即可，例如上图提示E:\\Node\\npm.ps1，删掉这个文件后就可以正常使用了
其他编辑器：HBuilder X、 WebStorm
JavaScript运行环境
浏览器
- Google Chrome 浏览器 （开发必备 官网下载地址）
- Microsoft Edge 浏览器（IE浏览器的替代）
- Firefox 浏览器（火狐浏览器，主要使用在Linux）
- Safari 浏览器（Mac自带）
- ...
Node.js
windows安装git
官网下载
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）此电脑 >> 单击右键，选择属性 >> 高级系统设置 >> 高级 >> 环境变量
>> 用户变量
编辑用户变量中Path，修改为 node_global的路径，确定
>> 系统变量
新建，添加如下系统变量，确定
(在刚才新建node_global目录下新建node_modules文件夹，再添加)
- 变量名：NODE_PATH
- 变量值：Node安装路径\\node_global\\node_modules
编辑系统变量中的Path，新建，添加 %NODE_PATH% （Node.js安装位置），确定
>> 确定 >> 确定
4.文件权限设置
找到 Node.js 安装根目录 >> 属性 >> 安全>> 编辑 >> 选择 Authenticated Users，勾选完全控制，应用，确定 >> 确定
linux安装node
1.官网下载包：下载包名为node-v22.17.0-linux-x64.tar.xz
2.解压：tar -xJf node-v22.17.0-linux-x64.tar.xz
3.移动到合适目录：sudo mv node-v22.17.0-linux-x64 /opt/node-v22.17.0
4.创建软链接：
sudo ln -s /opt/node-v22.17.0/bin/node /usr/local/bin/node
sudo ln -s /opt/node-v22.17.0/bin/npm /usr/local/bin/npm
sudo ln -s /opt/node-v22.17.0/bin/npx /usr/local/bin/npx
5.检查安装：
node -v
npm -v
nvm
nvm：node版本管理工具
Linux下载nvm：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm切换node版本出现N/A问题解决：
export NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist
nvm下载node版本：nvm install 22.17.0（node版本）
nvm查看安装node版本：nvm ls
nvm切换node版本：nvm use 22.17.0
管理包工具
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
windows安装git
下载
https://git-scm.com/downloads
解决下载git失败（无授权/下载慢）
方法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
linux安装git
1.官网下载包：下载包名为git-2.50.0.tar.gz
2.解压：tar -xJf git-2.50.0.tar.gz
3.移动到合适目录：sudo mv git-2.50.0 /opt/git-2.50.0
4.进入源代码目录中：cd /opt/git-2.50.0
5.配置和编译git：
make configure
./configure --prefix=/usr/local
make all doc info
6.编译完成后安装：sudo make install install-doc install-html install-info
7.检查安装：git -v
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查看版本号commitId）
- git cherry-pick commitId1 commitId2 // 引入多个commit提交
- git cherry-pick commitId1^.. 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 恢复
输入法
linux安装搜狗输入法
1.官网下载
下载文件名：sogoupinyin_4.2.1.145_amd64.deb
2.安装：可参考（搜狗输入法 for linux 安装指南）
sudo dpkg -i sogoupinyin_4.2.1.145_amd64.deb
提示缺少依赖：sudo apt -f install
3.搜狗输入法无法输入中文解决：可参考（linux安装搜狗输入法无法输入中文解决）
