前端基础知识【npm相关命令】【常用的vscode插件】
一、npm相关命令
1 # 查看 NPM 版本 2 $ npm -v 3 4 # 更新 NPM 版本 5 $ sudo npm i -g npm 6 7 # 在官方包仓库中搜索包 8 $ npm search [包名] 9 $ npm search express 10 11 # 查看官方包仓库中包所用 package.json 文件中的信息 12 $ npm view [包名] 13 $ npm view express 14 15 # 安装 package.json 文件中列出的包 16 $ npm install 17 18 # 安装包 19 20 # 安装在本地项目中 21 $ npm install [包名] 22 $ npm install express 23 24 # 安装在全局中 25 $ npm install -g [包名] 26 $ npm install -g express 27 28 # 安装并保存包到 package.json 文件中 29 30 # 安装在本地项目中 31 $ npm install [包名] --save 32 $ npm install express --save 33 34 # 安装在全局中 35 $ npm install -g [包名] --save 36 $ npm install -g express --save 37 38 # 查看安装的包 39 40 # 本地 41 $ npm list 42 43 # 全局 44 $ npm list -g 45 46 # 查看过期的包 47 48 # 本地 49 $ npm outdated 50 51 # 全局 52 $ npm outdated -g 53 54 # 更新全部包 55 56 # 本地 57 $ npm update 58 59 # 全局 60 $ npm update -g 61 62 # 更新指定的包 63 64 # 本地 65 $ npm update [包名] 66 $ npm update express 67 68 # 全局 69 $ npm update -g [包名] 70 $ npm update -g express 71 72 # 卸载包 73 74 # 本地 75 $ npm uninstall [包名] 76 $ npm uninstall express 77 78 # 全局 79 $ npm uninstall -g [包名] 80 $ npm uninstall -g express 81 82 # 查看全局包的安装路径 83 $ npm root -g 84 85 # 修改全局包的安装路径，修改后为 [安装路径]\node_modules\ 86 $ npm config set prefix "[安装路径]"
1、 -S 等同于--save，保存在package.json文件中，是在dependencies 下，
--save安装包信息将加入到dependencies（生产环境）中，生产阶段的依赖，也就是项目运行时的依赖，就是程序上线后仍然需要依赖；
2、 -D 等同于--save-dev，也保存在package.json文件中，是在devDependencies下，
--save-dev安装包信息将加入到devDependencies（开发环境）中，开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用；
3、 -g 等同于--global的简写，对模块进行全局安装，作用于全局环境下，
--global安装包信息是指把模块安装到操作系统上，一般会安装在AppDataAppData\Roaming\npm目录下，
例如：npm i webpack -g，就是全局安装webpack，在操作系统的任何一个目录下都可以使用webpack所提供的指令。
二、常用的vscode插件
插件市场：https://marketplace.visualstudio.com/
1、Live Server（本地服务器）
Live Server 插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。其最大特点在于热重载，即开发者可实时预览代码效果。 因为Live Server 允许开发者在浏览器中实时预览您正在编辑的网页。每当保存HTML、CSS、JavaScript文件时，该插件会自动刷新浏览器，以便开发者可以立即看到页面的更改效果。
2、TODO Highlights（todo高亮插件）
当使用todo或fixme标签后，可按下快捷键f1，然后选择all 或者todo即可查看当前项目中声明的标签信息
3、Markdown Preview Github Styling（markdown工具）
预览实时更新：插件允许您在 VSCode 中编写Markdown文档，并实时预览渲染效果。每当您对文档进行更改并保存时，预览面板会自动更新，以便您可以立即查看您的编辑效果。
提高可读性：通过应用 GitHub 风格的样式，该插件可以使 Markdown 文档更易于阅读，特别是对于那些已经熟悉 GitHub 的用户。这对于编写技术文档、文档说明、README 文件等非常有帮助。
可配置性：插件允许您根据需要进行一些自定义配置，以适应不同的渲染需求。您可以根据自己的偏好设置不同的预览样式。
总之，Markdown Preview Github Styling 插件通过在VSCode中提供GitHub 风格的 Markdown 预览，提高了Markdown编辑和协作的效率。
4、VsCode Icon（文件图标插件）
VSCode Icons 插件是Visual Studio Code中的一个扩展，其主要作用是为文件和文件夹添加图标，以增强编辑器的可视化效果和可识别性。其可以为不同的文件或文件件添加不同的图标，进而确保项目结构清晰，项目结构易于理解
5、Tabnine（AI代码补全）
Tabnine 是一款强大的智能代码补全插件，可在 Visual Studio Code（VSCode）中使用。其主要作用是提供高效和智能的代码建议，以加速代码编写和提高代码质量。具体来看，Tabnine 主要有如下功能：- 智能代码建议：Tabnine 使用机器学习和自然语言处理技术，分析您的代码并为您提供高质量的代码建议。这不仅包括常见的变量、函数和类名，还包括上下文感知的建议，可大大加速编码过程。
- 多语言支持：Tabnine支持多种编程语言，包括但不限于 JavaScript、Python、Java、C++、Go 等。这使得它适用于不同类型的项目和开发任务。
- 实时建议：插件在您键入代码时实时提供建议，让您不必在每次需要时手动查找文档或库。这有助于减少拼写错误和代码语法问题。
6、CodeSnap（代码转换成图片格式工具）
CodeSnap 是Visual Studio Code（VSCode）中的一个插件，其允许开发者选择要捕捉的代码段，并将其转换为图像格式。这样， 开发者可以将代码示例分享给其他人，而不必以纯文本或代码文件的形式分享 
7、CSS Pee（CSS工具）
CSS Peek 是 Vs Code中的一个插件，它的主要作用是帮助开发人员更轻松地查找和导航CSS样式表中的类、ID、选择器和样式定义。
8、JavaScript Code Snippets（js代码片段提示工具）
JavaScript Code Snippets代码片段是一个 VS Code 扩展，它提供了使用 ES6 语法进行 JavaScript 开发的代码片段集合
9、Prettier - Code formatter（代码格式化工具）
Prettier 是 VSCode中常用的代码格式化工具，Prettier 插件的主要作用在于 代码自动格式化。Prettier 插件可以自动格式化您的代码，包括 JavaScript、TypeScript、JSON、CSS、HTML 等多种编程语言。无需手动调整缩进、换行和其他格式设置，Prettier 会自动为开发者处理。
10、Git操作工具
Git Graph
Git Graph 插件用于可视化查看存储库的 Git操作，并从图形中轻松执行Git操作。类似于SOurceTree的可视化版本控制插件，可以更新、提交代码，查看提交记录，审视代码
GitLens — Git supercharged
11、Vue - Official（vue语法高亮工具）
该插件可以让Vue代码获得漂亮的语法高亮显示、错误检查和代码格式化。并且它还会对很多 Vue 指令和事件处理程序，进行提示和建议。
12、Auto Close Tag（自动结束标签工具）
该插件帮助我们输入标签的时候，自动结束标签。通常想要使用一个特定的 HTML 元素时，需要手动输入开始标签和结束标签。而当使用该插件后，只需要输入开始标签，它就会自动添加结束标签。此外，对于 Vue 开发者来说，它还支持自定义类型名称。当输入自定义组件的开始标签时，它会自动添加结束标签
13、Auto Rename Tag（标签重命名工具）
该插件帮助我们在重命名一个标签时，自动重命名HTML、XML标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。
14、Chinese (Simplified) （VSCode中文汉化）
15、Image preview （图片预览功能）
Image preview 插件可以在编辑器中实时预览图像文件，方便开发者在编写代码时查看图像的内容和效果。
16、HTML CSS Support（代码辅助功能）
HTML CSS Support 插件提供了对 HTML 和 CSS 的智能代码补全、语法高亮、代码片段和其他辅助功能。这个插件可以帮助开发者更高效地编写 HTML 和 CSS 代码。一些主要功能包括：
- 代码补全：当你输入 HTML 或 CSS 代码时，插件会根据上下文提供智能的代码补全建议，包括标签、属性、选择器、属性值等；
- 语法高亮：插件会根据语法规则对 HTML 和 CSS 代码进行高亮显示，使代码更易读；
- 代码片段：插件提供了一些常用的代码片段，可以通过简单的缩写快速插入，例如输入 div.container 会自动生成一个带有 class 为 container 的 div 标签；
- 快速文档：你可以通过悬停在代码上或使用快捷键来查看 HTML 和 CSS 属性的文档，以获取更多关于属性的信息；
- Emmet 支持：插件集成了 Emmet，可以通过简单的缩写快速生成 HTML 和 CSS 代码。
17、Import Cost（显示引入包的大小）
Import Cost 插件它可以帮助开发者在代码中实时显示导入的模块的大小。这对于优化前端项目的性能和加载速度非常有帮助。当你在代码中导入一个模块时，Import Cost 会在代码行旁边显示该模块的大小信息，通常以文件大小或以 gzip 压缩后的大小显示。这样你就可以快速了解每个模块的大小，从而更好地优化你的代码。Import Cost 支持多种语言和模块系统，包括 JavaScript、TypeScript、React、Vue 等，并且可以与其他插件和工具集成，如 Webpack、Rollup 等。
18、One Dark Pro（深色主题）
One Dark Pro 插件提供了一个深色主题，以帮助你在编写代码时获得更好的视觉体验。可以在 VS Code 的主题设置中选择它作为编辑器的主题。一旦应用了 One Dark Pro 主题，编辑器的背景、文本颜色、语法高亮等都会根据主题的设计进行相应的调整。One Dark Pro 主题的特点包括：
- 深色背景：主题采用深色的背景色，使代码更突出，减少眼部疲劳；
- 高对比度：主题使用明亮的文本颜色与深色背景形成鲜明对比，使代码更易读；
- 语法高亮：主题针对各种编程语言提供了精确的语法高亮，使代码结构更清晰；
- 统一的配色方案：主题使用一致的配色方案，使不同语法元素在视觉上有明确的区分。
19、Path Intellisense（路径补全）
Path Intellisense 插件提供了路径智能感知的功能，帮助你更轻松地输入和补全文件路径。当你在编辑器中输入文件路径时，它会自动为你提供路径的建议和补全。这包括文件系统中的文件和文件夹，以及你项目中已存在的文件。Path Intellisense 还提供了一些其他的功能，例如路径的快速导航、路径的复制和粘贴等。它还支持多种文件系统，包括本地文件系统、网络文件系统和远程文件系统。
Path Autocomplete（路径自动完成：打上./ 或者../）
20、Open in Browser（打开文件）
Open in Browser 插件允许你在编辑器中的 HTML、CSS、JavaScript 等文件上右键点击，并通过默认浏览器打开这些文件。你可以在 VS Code 中打开一个 HTML 文件，并在编辑器中右键点击该文件。在右键菜单中，你会看到一个 Open in Default Browser 的选项。选择该选项后，插件会自动使用你的默认浏览器打开该HTML文件，并在浏览器中显示其内容。
21、Indent-Rainbow（缩进颜色提示）
Indent-Rainbow 插件通过为每个缩进级别应用不同的颜色，帮助你更直观地识别和理解代码的缩进结构。当你在编辑器中打开一个文件时，Indent-Rainbow 会自动检测代码中的缩进，并为每个缩进级别应用不同的彩虹色。这样，你就可以清楚地看到代码中的缩进层次，从而更容易地理解代码的结构。该插件支持自定义颜色和缩进大小。你可以根据自己的喜好和需求，在插件的设置中进行配置。
22、filesize（显示文件大小）
filesize 插件可以在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间。该插件支持多种格式化选项，例如指定小数位数、指定单位、指定字节前缀等。你可以在插件的设置中进行配置
23、Better Comments（代码注释）
Better Comments插件它提供了更强大的代码注释功能，使你能够更好地组织和标记你的注释。使用 Better Comments 插件，你可以通过在注释前添加特定的标记来给注释分类和着色。这些标记包括：
- !：用于突出显示重要的注释或需要特别关注的部分；
- ?：用于表示疑问或需要进一步解释的注释；
- TODO：用于标记需要完成的任务或待办事项；
- *：用于强调或标记注释中的关键信息；
- //：用于普通的注释。
24、Regex Previewer（实时测试正则）
Regex Previewer 插件可以帮助你在编辑正则表达式时实时预览匹配结果。它会在编辑器的侧边栏中显示一个实时预览窗格，其中会显示匹配结果的高亮显示。该插件支持多种正则表达式语法，包括 JavaScript、Python、Java 等常见的语法。你可以根据需要选择适合你的语法类型
25、Code Runner
为多种语言运行代码段或代码文件：C、C++、Java、JavaScript、PHP、Python、Perl、Perl6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F#脚本、F#（.NET核心）、C#脚本、C#（.NET核心）、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml脚本、R、AppleScript、Elixir、Visual Basic。NET、Clojure、Haxe、Objective-C、Rust、Racket、Scheme、AutoHotkey、AutoIt、Kotlin、Dart、Free Pascal、Haskell、Nim、D、Lisp、Kit、V、SCSS、Sass、CUDA、Less、Fortran、Ring、Standard ML、Zig、Mojo和自定义命令
26、ESLint Chinese Rules
ESLint 规则中文辅助提示插件，帮助更便捷的查询引用的规则，理解规则。
- 支持eslint官方规则
- 支持eslint-vue-plugin规则
- 支持eslint-plugin-react规则
- 鼠标悬停在 ESLint 诊断错误的地方，打开惊喜小提示，点击蓝色提示，方便的跳转文档地址。
27、ESLint
28、TONGYI Lingma（AI辅助工具）
通义灵码，是一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/API 的使用场景调优，为开发者带来高效、流畅的编码体验。兼容 Visual Studio Code、JetBrains IDEs 等主流 IDE；
支持 Java、Python、Go、C/C++/C#、JavaScript、TypeScript、PHP、Ruby、Rust、Scala 等主流编程语言。
29、Codelf (变量命名神器)
从Github、Bitbucket、Google Code、Codeplex、Sourceforge、Fedora Project、GitLab等项目中搜索，找到真实世界中使用的变量名。用法：Select text, right-click and select "Codelf"
30、JavaScript Booster
比如：把鼠标放在var上会提示你是否转换成const或者let；放在if上会提示你是否转换成三元表达式。点击后一建生成
31、Power Mode（敲代码动效）
32、Project Manager（文件管理器）
- 插件名：Project Manager
- 官方地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
- 特征：可用命令：
- Project Manager: Save Project将当前文件夹/工作区另存为新项目
- Project Manager: Edit Project手动编辑您的项目 ( projects.json)
- Project Manager: List Projects to Open列出所有已保存/检测到的项目并选择一个
- Project Manager: List Projects to Open in New Window列出所有已保存/检测到的项目并选择一个在新窗口中打开
- Project Manager: Filter Projects by Tag按选定标签过滤收藏项目
- 用法：
- Project Manager扩展有自己的Side Bar，带有各种命令来提高您的工作效率
- 您可以定义自定义标签（通过设置），为每个项目projectManager.tags定义多个标签，并过滤标记在其标签上的项目
33、uni-helper（vscode运行uniapp）
使用步骤：
1.先下载HBuilderX然后导入你需要开发的uni项目;
2.在vscode中再次打开你的uni项目;
3.去vscode插件市场安装一个uni-helper这个插件;
4.在vscode中编写并实时更新HBuilderX的代码和预览
34、Template String Converter (模板字符串转换器 ----- 输入$，引号自动变成 `` )
35、background（修改背景图）
平时编程总是对着一顿枯燥的代码背景，VSCode一个神仙插件Background，可以更改自己想要的背景图
36、Draw io Integration
在VSCode中就可以创建思维导图，要创建新图表，只需创建一个空的 *.drawio , *.drawio.svg 或 *.drawio.png 文件并打开它drawio.svg、.drawio.png嵌入到 Github，不需要导出
37、Image Sprites
- Sprite文件夹中的所有图像
- 右键单击包含图像的文件夹并选择Create Image Sprite
- Sprite一些图像
- 选择图片，右键选择Create Image Sprite
38、Svg Preview（svg预览工具）
当你找到一个合适的 svg 图像却因为颜色、形态等不合适时，可以使用此插件进行修改。
39、file-size
file-size : 一个简单的扩展。在状态栏中显示当前文本文件的大小。保存文件或更改活动选项卡时，状态将更新。
浙公网安备 33010602011771号