例简介

Sublime Text是一个代码编辑器，也是HTML和散文先进的文本编辑器。

本文通过实例来介绍项目中常用快捷键和插件的用法，熟悉快捷键和引用插件可以极大地提高我们的开发效率。

常用快捷

输入“html:5”后点击Tab键或输入“!”后点击Ctrl+E都能转换为html5的骨架结构，转换为的代码如下图：

Tips：需安装Emmet插件；

右下角的文本类型要选为“html”。

输入“div.wrapper>div.header>span.title{标题}”或“ul.lis>li*5>p.title+p.content”后点击Tab可以快速生成相应的代码，转换为的代码如下图：

Tips：上面两种写法只是其中的一部分，大家可以自己练习多种组合；

img[src="face/bd/$.gif"] ＋Tab，bd目录下自动从1开始到最后，适合于一次性增加从1--多个的图片。

“Ctrl+Shift+P”用于快速更改文件类型（js/css）（第一图）、安装插件（第二图）等，如下图：

“Ctrl+G”用于快速定位到行数，比如审查元素知道修改的样式在那一行，就可以点击快捷键，然后输入行数，就能定位到相应的位置进行修改；

“Ctrl+C”用于撤回信息，而“Ctrl+Y”用于恢复信息，都可多次操作；

“Ctrl+/”用于注释信息，可单行也可以多行；

“Ctrl+F”用于查找输入的内容，可往前、往后或全部查找；

“Ctrl+Shirt+D”用于复制游标所在行；

“Ctrl+D”用于选择游标所在单词，连续“Ctrl+D”实现多个选择（选择与第一次选择相同的单词）；如果中间有要跳过的相同单词，可以先点击“Ctrl+K”再点击“Ctrl+D”；

“Alt+F3”用于选择所有与游标所在单词相同的单词，跟上面一个快捷键对于批量修改非常方便。

“Alt+Shift+1/2/3”，后面数字表示要显示多少列，如下图，对于参照html编写css和js有很大的便利。

Tips：从标题到这块是最经常用到的快捷键，一定熟悉记住。

“Ctrl+] ”增加缩进，“Ctrl+] ” 减小缩进，好的排版有利于查看；

“Ctrl+Shift+V”保持缩进粘贴，直接用“Ctrl+V”有时会导致显示排版乱了，使用该快捷键可以保持原来的排版；

“Ctrl+PgUp”往前切换Tab栏的文件，“Ctrl+PgDn”往后切换Tab栏的文件；

“/**+Tab”常用于js的自动补全注释信息和内容；

“Ctrl+P”用于快速查找并打开文件，点击快捷键后打开命令面板，直接点击就可以打开文件，也可以进行搜索操作；

“Ctrl+L”用于选择单行；

“Ctrl+H”用于查找替换，可替换单个或全部替换；

“Ctrl+Shift+Enter”在当前上方添加一行；

右键点击“Open Containing Folder”可以打开该文件的本地目录。

“Ctrl+Shift+P”打开命令面板，输入range点击第一条就会出现了，然后输入开始和结束数字，可以批量修改序号，需安装插件Text Pastry。

“跟踪函数ctags”在使用函数调转功能前，需要先生成.tags文件，只需在项目文件管理器的项目文件上右键点击Ctags:Rebuild Tags即可（注意，在改动文件之后会重新生成.tags）；所有工作都准备充分之后，就可以在函数名上右键点击navigate 头definition跳转到指定函数了，返回用jump back，需安装插件ctags。

常用插件

直接安装：直接下载安装包解压缩到Packages目录（菜单->preferences->Browse Packages）；　

使用Package Control组件安装（在线安装）：点击“Ctrl+`”，然后输入“import urllib.request,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())（）”回车，下载完毕后，重启Sublime Text程序；如果在Perferences->中看到package control这一项，则安装成功。

Tips：输入代码为3版本，其他版本代码可以百度搜索。

用Package Control安装插件的方法，按下“Ctrl+Shift+P”调出命令面板，输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

比如“Emmet”，在搜索框输入“Emmet”，列表就会显示插件“Emmet”，然后点击该条数据，就会开始安装该插件，安装信息可查看左下角。

Tips：安装插件时保持网络畅通，避免插件由于网络原因奔溃。

常用插件的用法说明：

Emmet（原名 Zen Coding）：一种快速编写html/css的方法；

Autoprefixer：CSS3私有前缀自动补全插件；

AutoFileName：显示路径下文件名；

SyncedSidebarBg：自动同步侧边栏底色为编辑窗口底色；

HTML-CSS-JS Prettify：html/css/js格式化工具，依赖node.js，格式化的HTML不能有中文和中文符号等，HTMLPrettify.sublime-settings路径对应node安装目录，使用快捷键“Ctrl+Shift+H”；

sublimelinter：检查js语法；

jQuery：补全JQ代码；

Text Pastry：可以一次性改批量序号，用法快捷键里面有介绍；

ctags：跟踪函数，用法快捷键里面有介绍；

Less2Css：保存less文件时候自动生成css文件，windows下，Less2CSS对lessc.cmd有依赖，请下载：https://github.com/duncansmart/less.js-windows/releases后并将其路径（ E:/Less）添加至系统环境变量中；一般建议生产环境不使用less，所以这个还是蛮方便的；

SideBarEnhancements：设置浏览器，如下图。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

生命是什么呢，

生命是时时刻刻不知如何是好。

- 2024.03.06 -

工欲善其事必先利其器，一款好的开发工具可以让我们事半功倍。前面我们对HTML的相关概念和基本结构已经有了基本的了解，下面我们就来安装在前端开发中的需要使用的开发工具及环境。

在众多HTML编辑器中，选择一个适合自己的工具至关重要。今天我们就来认识一下前端开发工作中使用的最广泛的工具 “VS Code” , 并在本地搭建好开发环境。

一、前端开发工具简介

在介绍 “VS Code” 之前，我们先来了解一下什么是 “IDE”。

什么是 “IDE”

IDE 是集成开发环境的英文缩写 （Integrated Development Environment)，集成开发环境就是将在开发过程中所需要的工具或功能集成到了一起，比如：代码编写、分析、编译、调试等功能，从而最大化地提高开发者的工作效率。

IDE 通用特点：

• 提供图形用户界面，在 IDE 中可以完成开发过程中所有工作；
• 支持代码补全与检查，并提供快速修复选项；
• 内置解释器与编译器；
• 功能强大的调试器，支持设置断点与单步执行等功能。

前端开发IDE

而在前端开发中我们需要安装一个“趁手”的IDE，帮助我们更快更高效的开发，一个好的IDE是每个程序员的必备武器。前端开发IDE有很多种，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

我们可以任选一种使用。这几种IDE的对比如下：

这么多IDE该怎么选呢？对于我们初学者来说，选择Visual Studio Code，（简称VS Code）就可以了。VS code具备内置功能非常丰富、插件很全且安装简单、轻量、对电脑的配置要求不算很高，且有MAC版本，应用广泛等优点，很适合新手。

下面就和我一起下载并安装VS code吧！

二、VS Code下载与安装

1、进入VScode官网

官网地址：https://code.visualstudio.com/

点击【Download】进入下载，不要点击【Download for Windows Stable Build】，否则它会自动帮你下载User Installer用户版本。

• 【Stable】：稳定版本，比较稳定。
• 【Insiders】：测试版本，添加了一些新东西，还在测试中，可能会存在一些Bug，不怎么稳定。

2、然后你会看见Windows，Linux，苹果三个版本，我们选择Windows版本，选择System Installer 点击【x64】进行下载，不要点击【↓ Windows windows8,10,11】，否则它也会自动默认下载User Installer用户版本。

• 【User Installer】：用户安装程序，VScode安装在你电脑当前账户的目录上，如果你换了一个其他账户登录你的电脑，那么你就用不了之前那个账户下载的VScode了。
• 
  

• 【System Installer】：系统安装程序，VScode不会安装在你电脑的当前账户上，而是直接安装在系统上，所有账户都可以使用。

其实选哪个版本都无伤大雅，就算你下载了【User Installer】版本也没事，因为没人会没事把自己电脑上的账户换成其他人的账户登录，就算换了也可以换回来，只是有时候特殊情况换了个账户登录不能使用就有一点麻烦，所以还是推荐尽量下载【System Installer】版本。

【x86】：32位操作系统。【x64】:64位操作系统，如果想知道自己是什么系统，可以敲击Win键找到“设置”→“系统”→“关于”→“系统类型”。

3、正在下载

这个下载会比较慢，如果不想等可直接去找个别人下好的安装包哦！也可找小编领取。

4、下载完后打开文件，会弹出许可协议弹窗，勾选我同意此协议，单击【下一步】。

5、先去D盘里创建一个新文件夹取名叫“VScode”，点击【浏览】按钮修改安装路径，把路径改到刚刚在D盘里创建的VScode文件夹里。如果觉得麻烦也可以直接默认安装在C盘，然后单击【下一步】，但还是建议安装在D盘里。

6、修改完路径后，单击【下一步】。（安装路径是这个样子D:\VScode\Microsoft VS Code）

7、选择开始菜单文件夹，默认"Visual Studio Code",单击【下一步】。

8、根据自己的需求进行勾选，勾选完单击【下一步】。

【创建桌面快捷方式】：在桌面创建VScode快捷方式。

【将“通过Code打开”操作添加到Windows资源管理器文件上下文菜单】：选中一个文件鼠标右键可以通过VScode打开文件。

【将“通过Code打开”操作添加到Windows资源管理器目录上下文菜单】：选中一个文件夹鼠标右键可以通过VScode打开文件夹。

【将Code注册为受支持的文件类型的编辑器】：对于受支持的文件类型的文件，鼠标右键选择“打开方式”，可以通过“Vscode”打开。

【添加到PATH】：添加VScode文件夹里的bin目录到PATH环境变量里，添加完以后可通过系统命令输入code直接启动VScode。

9、单击【安装】进行安装。

10、安装完成后单击【完成】启动。

三、VS code配置插件

下载完之后，大家可以根据自己的需求下载插件，这里推荐我用的比较顺手的几个。

1、下载汉化包

点击扩展，在搜索栏搜索Chinese，选择Chinese中文简体点击【Install】进行安装。（建议少用，多看英文，这是一位优秀的程序员走向成功的标志性成长。）

安装完后单击【Change Language and Restart】重启VScode软件，刷新一下就变成中文简体了。

2、下载【会了吧】插件

在搜索栏里搜索【会了吧】，这个是在你敲代码时会自动识别你敲的单词进行翻译，如果你有一个单词不认识，可以点进“会了吧”看看翻译，对英语基础差的人很友好。

3、下载【Open in browser】插件

这个是用来运行代码，并且在浏览器打开，查看运行效果的，这个插件必须下，否则当你写完HTML网页时你无法运行，无法预览页面，不信你可以先试试能不能运行再回来下载。

4、下载【Live Server】插件

这个是用于实时预览运行效果，当你使用open in browser运行代码时，只要你的代码有改变，你就需要手动刷新重新预览页面运行结果，而Live Server是自动刷新运行结果，非常方便，非常滴银性！

四、用VScode编写HTML代码

1、先去D盘里创建一个新文件夹取名叫“Workspace”（名字随便取名）。

2、进入VScode找到左上角的文件选择点击打开文件夹。

3、找到刚刚创建的“workspace”文件夹，单击【选择文件夹】。

4、找到WORKSPACRE，点击新建文件，名字输入“01.html”,然后点击回车键创建。

5、在刚刚创建的01.html文件下输入以下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charest="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>这是我的第一个网页</h1>
    </body></html>

6、鼠标右击空白处单击【Open In Default Browser】查看运行结果。

7、运行结果如下 。

以上就是常用的前端开发工具VS Code的下载和安装教程了，你的第一个HTML网页运行成功了吗？

一个高效的HTML开发工具和环境是每个前端开发者的得力助手。通过合理选择工具、配置环境、使用框架和库、以及不断的调试和测试，你可以将创意转化为现实，构建出令人惊叹的网页。记住，技术永远在变，唯有不断学习和实践，才能让你在这个数字世界中游刃有余。

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>网页标题</title>
 </head>
 <body>
 网页显示内容
 </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文档类型 </title>
</head>
<body>
</body>
</html>

<!-- 这是一段注释 -->

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
 </p>
 <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
 页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

<img src="images/pic.jpg" alt="产品图片" />