开发环境及插件安装指南
开发环境及插件安装指南
Mintal一、开发工具–Visual Studio Code
安装
安装包
安装流程
- 一直点击下一步，到最后安装完成，重启打开，即可使用。
VSCode内部设置 (文件–首选项–设置)
1. 统一设置
- 设置tab键大小等同两个空格
- 代码超出窗口可视范围自动换行
- 设置默认浏览器（要先安装open-in-browser插件）
- 选择
文件--首选项--设置，输入open-in-browser.default回车，输入Chrome，Ctrl+s保存即可。
- 选择
- 快捷右键添加可进入浏览器窗口
- 安装插件：
open in browser - 安装完成后，右键点击 HTML 页面即可看到入口，支持以下功能：
- Open in Default Browsers: 使用默认浏览器打开 快捷键：
alt+b - Open in Other Browsers: 使用其他浏览器打开 快捷键：
alt+shift+b
- Open in Default Browsers: 使用默认浏览器打开 快捷键：
- 安装插件：
开发必备工具（插件）
插件清单
- ESlint: 代码格式检测
- HTML CSS Support: 检测HTML、CSS格式
- Javascript（es6）code snippets: js代码提示
- Vetur/ Volar: 检测Vue格式
- Auto Close Tag: 自动闭合HTML标签
- Auto Rename Tag: 自动改变闭合标签的名字
- Bracket Pair Colorizer: 代码中的括号高亮
- Chinese (Simplified) Language Pack for Visual Studio Code: VScode中文环境
- Path Intellisense: 自动补全文件名、文件路径
- px to rem & rpx (cssrem): 响应式布局时px一键转rem
- Todo Tree: 快捷记标记及查找标记
- TODO Highlight: 关键字高亮
- Prettier - Code formatter: 代码格式化
- open in browser: HTML静态页面快捷打开浏览器查看效果
- code runner: 快速运行Node代码
- code debugger: 快速断点调试
- Code Translate: 实时翻译光标所在的英文单词
- koroFileHeader: 生成编辑者信息与最后一次编辑时间的注释
- Office Viewer: Markdown编辑器，支持打开PDF和Excel
- vscode-icons: 文件小图标库
- GitLens: 方便使用Git
- Image preview: 可以预览引入的图像
代码格式化工具
ESlint + Prettier 配置指南
安装插件：
- ESlint 版本号：v2.2.2
- Prettier - Code formatter 版本号：v9.0.0
新建
.eslintrc.js文件，内容如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14module.exports = {
parser: "@typescript-eslint/parser",
parserOptions: {
sourceType: "module",
},
extends: [
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
rules: {
// 可在此添加自定义规则
},
};配置 Prettier （可选）： 在项目根目录新建 .prettierrc 文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf"
}设置 ctrl+s 保存时自动格式化： 在 settings.json 文件中添加以下两行代码：
1
2
3
4{
"editor.formatOnType": true,
"editor.formatOnSave": true
}
二、环境及包管理工具–Node.js和npm
安装
下载安装包
官网地址: Node.js 官网下载
直接下载安装包并按照默认提示完成安装即可，点击 Next 和 Finish。
安装步骤
- a. 安装node包：运行安装程序。
- b. 接受协议：点击
Next。 - c. 选择安装目录：记住安装目录，点击
Next。 - d. 安装选项：保持默认选项（如下图所示），然后点击
Next。- Node.js runtime：表示运行环境
- npm package manager：表示npm包管理器
- online documentation shortcuts：在线文档快捷方式
- Add to PATH：添加到环境变量
- e. 安装选项：可以不勾选，直接点击
Next。 - **f. 点击
Install**，开始安装。 - **g. 安装完成后，点击
Finish**。
验证安装是否成功
- 打开
cmd，输入node -v和npm -v，如果显示版本号，说明安装成功。
问题：
如果在运行 npm -v 后出现错误：
1 | npm config set prefix "E:\FRONT\nodejs\node_gobal***" |
解决：
如果在运行 npm -v 后出现错误：
1 | 删除"C:\Users\用户名"下的".npmrc"文件即可 |
npm环境变量的配置
一般来说，我们安装的时候，环境的默认配置都在C 盘，npm的缓存以及全局安装包都在C盘，这个时候，只需要配置 用户的环境变量就可以了
我的电脑->右键->属性->高级系统设置->高级->环境变量；
此时的配置都默认在C盘了；
此时基础的环境配置已经完成了；
npm 命令已经可以正常使用了；
三、npm辅助工具
nrm –（npm源管理工具）
nrm 是一个 npm 源管理器，允许你在 npm 源间切换。
1 | npm install --g nrm |
nvm –（npm版本管理工具）
NVM 安装地址
Node Version Manager（NVM） 是一种用于管理多个主动节点.js版本的工具。
Node.js平台，Node.js工具社区和Node.js库是快速移动的目标 - 在一个Node.js版本下可能有效的方法不能保证适用于另一个版本的Node.js。因此，用户需要一些方法在 Node 的多个版本之间切换.js
安装步骤
如果电脑上之前已经单独安装了node，先卸载（可以在控制面板里面卸载），然后再安装nvm
傻瓜式一直点击下一步即可安装。
安装完成后，可以打开cmd命令行窗口执行
1 | nvm -v |
配置
配置环境变量
(如果是默认安装在c盘的。就可以跳过。如果是安装在其他盘的、则需要配置相应的环境变量)
在环境变量里就可以看见nvm的路径。如果是安装在其他盘的。就去找到对应的安装路径修改即可
如果安装nvm的文件夹里没有nodejs这个文件夹的话，可以自己手动新建一个空的nodejs文件夹即可
nvm常用命令
1 | ## 禁用node.js版本管理-不卸载任何东西 |
nvm命令行操作命令
1 | nvm命令行操作命令 |
评论
匿名评论隐私政策
ValineTwikoo
