前端小白——VS code安装

VS code安装


1、下载vscode**

https://code.visualstudio.com…

2、安装vscode

在Windows下选择System Installer安装
前端小白——VS code安装
前端小白——VS code安装
前端小白——VS code安装

①将“通过code 打开“操作添加到windows资源管理器文件上下文菜单
②将“通过code 打开”操作添加到windows资源管理器目录上下文菜单
说明:①②勾选上,可以对文件,目录点击鼠标右键,选择使用 VScode 打开。
③将code注册为受支持的文件类型的编辑器。说明:默认使用 VScode 打开诸如 txt,py 等文本类型的文件,一般建议不勾选。让 VScode 支持的代码文件全部变成 VScode 默认打开,文件图标也会随之更改,很好辨认。
④添加到PATH(重启后生效)
说明:这步骤默认的,勾选上,不用配置环境变量,可以直接使用。
前端小白——VS code安装
前端小白——VS code安装
前端小白——VS code安装

3、下载常用插件

成功安装vscode后,安装react常用的几个插件
前端小白——VS code安装

Auto Close Tag: 输入开始标签后,自动添加结束标签。比如输入

,自动添加

Auto Rename Tag: 更改 HTML/XML 标签名时,自动更新相对应的开始标签或结束标签的标签名
Beautify 格式化代码的插件,美化js、json、CSS、SASS HTML、CSS;快捷键Shift+Alt+F(不同的电脑可能不一样)
Beautify css/sass/scss/less]样式代码格式化)
Bracket pair Colorizer 为代码中的各种结对的括号提供了颜色、高亮等的功能
Debugger for chrome可以在vs中启动Chrome控制台,是常用的官方的调试工具;让vscode映射Chrome中的debug功能,使得静态界面都可以用vscode来打断点调试
Document this 添加注释块
ESLint 帮助检查Js编程时的语法错误,ta能够分析js代码,找到bug并且确保一定程度的js语法书写的正确性;
vscode-icons 目录树图标
ES7 React/Redux/GraphQL/React-Native snippets 是react的代码片段
Path Autocomplete是能给vscode补全路径的全功能的插件,输入./可以获取当前目录下的所有文件夹和文件, 输入…/可以自动补全上一个目录;
前端小白——VS code安装