常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

JavaScript/前端
377
0
0
2023-09-12
标签   VSCode

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

VSCode安装教程

下载地址:Download Visual Studio code

Visual Studio Code (简称 VS Code / VSC) 是 微软公司 推出的一款 免费开源 的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT 等特性,支持插件扩展等等。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

推荐理由:

  • 比 sublime 开源,比 webstorm 更轻
  • 智能提示很强大
  • 自带 emmet
  • 插件安装非常方便
  • 自带强大的调试功能
  • 软件跨平台支持 Win、Mac 以及 Linux 。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

这里我们选择与电脑操作系统合适的版本进行下载安装。

VSCode安装 跟着图一步步走,简单明了。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

注:

1:在桌面创建快捷方式:勾选

2:将VSCode添加到右键菜单,支持打开文件:勾选

3:将VSCode添加到右键菜单,支持打开目录:勾选

4:勾选后会把很多文本格式改为用VSCode打开,例如.txt文件:不勾选

5:添加到PATH(环境变量),自动添加,无需手动配置:勾选

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

安装好的软件我们打开,在搜索栏里面输入“chinese”找到汉化工具并安装并重新启动,重启后就会被汉化。桌面新建文件夹用于存储我们所要编辑的文件夹进行管理。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

安装中文语言包并将显示语言改为中文,点击安装并重启;

搜索Chinese,安装第一个如下图,然后重启 VSCode 即可

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

新建文件夹命名规则:

文件目录管理,文件→打开文件夹

颜色主题,设置→颜色主题

在弹出的选择主题界面,选择自己喜欢的主题就可以。其中Monokai是与sublime风格一致。

其他操作

放大缩小视图:ctrl + 加号 和 ctrl + 减号

向上复制一行:alt+shift+↑

向下复制一行:alt+shift+↓

当光标点击到某一行时,默认选中全行,可以直接复制粘贴

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

1、文件名不宜太长;

2、不要在文件中出现空格;

3、不要使用特殊符号;

4、尽量使用有意义的单词,不推荐使用中文命名。

新建第一个网页文件,strat.html,输入“ hello world ”,保存ctrl+s,右键shift+alt+b打开网页

大家可以安装这个插件更加方便,快捷键alt+b键

VSCode 插件安装

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

点击插件安装按钮,在搜索框输入需要安装的插件名称,点击install进行安装即可。安装完毕,需要重新加载软件使插件生效。

推荐使用的插件

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

禁用或卸载已安装的插件

在扩展界面,点击“更多操作”(三个点),选择“显示安装的扩展”,在列表中找到需要禁用的插件,点击“禁用”或者“卸载”即可。同样操作完毕需要重新加载生效。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

配置 C语言 环境常见插件、常用插件及常见问题

必要插件:

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

选装插件

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

美化插件

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Web前端必备的VSCode插件

运行 HTML文件

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

调试你的 HTML 文件

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

背景插件——background

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

错误提示——HTMLHint

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

路径补全——Path Intellisense

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

文件图标——vscode-icons

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

其他重要插件推荐

Vue配件

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

AutoRenameTag

自动重命名成对的HTML/XML标记,修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改,与Visual Studio IDE一样。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Auto Close Tag

自动添加HTML/XML关闭标签,与Visual Studio IDE或Sublime Text一样。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Beautify

格式化代码工具,在Visual Studio Code中美化javascript, JSON , CSS , Sass 和HTML。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Debugger for Java

一个基于Java调试服务器的轻量级Java调试器,它扩展了 Red Hat 对Java的语言支持。它允许用户使用Visual Studio code (VS code)调试Java代码

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

ESLint

查找并修复 JavaScript 代码中的问题

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Highlight Matching Tag

这个扩展突出显示匹配的开始和/或结束标记。它还可以在状态栏中显示到标签的路径。虽然VSCode有一些基本的标签匹配,但它只是——基本的。这个扩展将尝试匹配任何地方的标签:从标签属性, 字符串 内部,任何文件,同时还提供广泛的样式选项来定制如何突出显示标签。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Image Preview

显示图像预览在排水沟和悬停

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Image Snippets

“图像片段”可以检测你的图像源路径在最后一行,自动完成一些片段,如宽度/高度

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Live Server

启动一个开发本地服务器,为静态和动态页面提供实时加载功能

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Prettier-Code formatter

Prettier是一个固执己见的代码格式化器。它通过解析您的代码,并使用自己的规则重新打印它,这些规则将最大行的长度考虑在内,并在必要时包装代码,从而强制实现一致的样式

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Sass/Less/ stylus /Pug/Jade/Typescript/Javascript Compile Hero Pro

轻松编译ts, tsx, scss, less, Stylus , jade, pug和es6+保存,而无需使用构建任务

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

Visual Studio IntelliCode

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

FluentIcons

产品图标主题允许主题作者自定义在VS Code的内置视图中使用的图标:除了文件图标(由文件图标主题覆盖)和扩展贡献的图标以外的所有图标。这个扩展使用的流利图标。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

One Dark Pro

Atom的Visual Studio Code标志性的一个黑暗主题

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

HTML CSS Support

Visual Studio代码的HTML id和类属性补全。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

JavaScript (ES6) code snippets

这个扩展包含Vs code编辑器的ES6语法的JavaScript代码片段(同时支持JavaScript和TypeScript)。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

jQuery Code Snippets

jQuery代码提示,超过130个用于JavaScript代码的jQuery代码片段。

只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)

stylus

将语法高亮显示和代码完成添加到Visual Studio code中的Stylus文件。

常用编辑器软件VSCode安装教程,简单实用(超完整,小白专用)