emmet

sublime 热门插件： https://www.imjeff.cn/blog/146/ 1、Emmet Emmet 是一个前端开发的利器，其前身是 Zen Coding。它让编写 HTML 代码变得简单。Emmet 的基本用法是：输入简写形式，然后按 Tab 键。 安装方法参见： http://www.jb51.net/softjc/121265.html 注意：PyV8可能不能自动完成安装，请手动安装，windows下PyV8实测的目录结构如下： 下载链接如下： http://pan.baidu.com/s/1nu8ENmL 来源： oschina 链接： https://my.oschina.net/u/2994921/blog/811494

W3C教程 Sublime Text 使用手册 界面布局 标签（Tab）：无需介绍。 编辑区（Editing Area）：无需介绍。 侧栏（Side Bar）：包含当前打开的文件以及文件夹视图。 缩略图（Minimap）：如其名。 命令板（Command Palette）：Sublime Text的操作中心，它使得我们基本可以脱离鼠标和菜单栏进行操作。 控制台（Console）：使用Ctrl + `调出，它既是一个标准的Python REPL，也可以直接对Sublime Text进行配置。 状态栏（Status Bar）：显示当前行号、当前语言和Tab格式等信息。 配置（Settings） 与其他GUI环境下的编辑器不同，Sublime Text并没有一个专门的配置界面，与之相反，Sublime Text使用JSON配置文件，例如： { "font_size": 12, "highlight_line": true, } 会将默认字体大小调整为12，并高亮当前行。 JSON配置文件的引入简化了Sublime Text的界面，但也使得配置变的复杂，一般我会到这里查看可用的Sublime Text配置。 编辑 注释 Ctrl + / 单行注释（//开头这种形式） Ctrl + Shift + / 多行注释（/**/包裹这种形式） 在当前行前后插入 下一行插入：Ctrl + Enter

看清楚哦~~这是Sublime text 3不是2的版本，两者的安装还是有区别的，下面的方法是我感觉比较简单的，其他的要命令什么的感觉太复杂了，经测试是OK的。 先关闭Sublime text 3： 第一步：下载 sublime_package_control-master.zip ，解压命名文件夹为Package Control。(注意大小写) 第二步：下载 sublime_package_control-python3.zip ，解压后覆盖到刚刚的Package Control中，完成插件API函数的更新。 第三步：打开 Sublime Text 3，选择菜单： Preference-->Browse Package... 浏览插件 第四步：把package control复制到此目录，重启 Sublime text 3。 然后菜单Preferences就会多了两个Package..的东西如下： Package Control 安装成功 第五步： 点击菜单 Preference-->Package Control 点击Install Package 等待几秒后再弹出如下内容，敲键盘emmet，选择如下： 在 Emmet 安装完成后，会显示如下屏幕：然后会自动安装PyV8，安装完成，重启 Sublime Text 3。 搜索框没有emmet相关内容

Sublime text 3下安装Emmet插件 看清楚哦~~这是Sublime text 3不是2的版本，两者的安装还是有区别的，下面的方法是我感觉比较简单的，其他的要命令什么的感觉太复杂了，经测试是OK的。 先关闭Sublime text 3： 第一步：下载 sublime_package_control-master.zip ，解压命名文件夹为Package Control。(注意大小写) 第二步：下载 sublime_package_control-python3.zip ，解压后覆盖到刚刚的Package Control中，完成插件API函数的更新。 第三步：打开Sublime Text 3，选择菜单：Preference–>Browse Package… 浏览插件 第四步：把package control复制到此目录，重启 Sublime text 3。 然后菜单Preferences就会多了两个Package..的东西如下： Package Control 安装成功 第五步： 点击菜单Preference–>Package Control 点击Install Package 等待几秒后再弹出如下内容，敲键盘emmet，选择如下： 在 Emmet 安装完成后，会显示如下屏幕：然后会自动安装PyV8，安装完成，重启 Sublime Text 3。

前面 潜行者m 介绍了 Emmet 的功能 和 如何使用 Emmet 来生成 HTML 代码 ，这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。 首先，Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性，我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示： 你不妨在编写 CSS 的时候，留意一下 ST2 提供了哪些属性的缩写方法，这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能，请往下看。 简写属性和属性值 如果你想生成 width:100px; 你只需要输入 w100 就可以了，因为 Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。默认的属性值单位是 px ，你可以在值的后面紧跟字符生成单位，可以是任意字符。例如，w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位，如果你紧跟属性值后面的字符是 p ，那么将会生成 width:100%; 这样的语句，其中 p 表示百分比单位。与此类似的还有： e → em; x → ex。 例如 margin 这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为 Emmet 的指令中是不允许空格的

1、Auto Rename Tag ——自动重命名成对的HTML标记。假如你创建了一个<p>标记。现在你想更改它。有了这个软件，你只需要更改一个就行，另一个会自动修改。从理论上来说，使用这个软件可以把你的工作效率提升一倍。 2、HTML CSS Support ——HTML文档的CSS支持工具。该工具在获得一些简洁的语法高亮显示和代码建议方面非常有用。 3、HTML Snippets ——这一工具在代码分段方面非常有用，可以为你节省大量的时间。它能跟Emmet配对，这样一来你甚至都不用再真正键入HTML了。 4、Babel ES6/ES7 ——JavaScript Babel的辅助工具。如果你用的是Babel，这个工具可以让你更容易区分代码。如果你喜欢JavaScript，那务必也不要错过这款软件。 5、Bracket Pair Colorizer ——色彩可视化工具。如果你没有准确地括号，那这个工具对于发现因此导致的许多常见漏洞十分方便。 6、ESLint ——你在编写代码的时候，利用这个软件可以轻易获取有关漏洞的提示，而且在编码过程中，它还可以帮助你养成良好的编码习惯。 7、Guides ——这一工具可以被用来添加额外的指导行代码。这是另一个视觉提示，以确保你正确地括号了。 8、JavaScript Console Utils ——使控制台日志记录变得更为简单可行

Brackets 设置中文 Debug -> Switch Language **打开目录 ** 方法一：打开菜单，文件 -> 打开目录 方法二：使用快捷键：alt + command + O **快速导航 ** 方法一：打开菜单：导航 -> 打开快速导航 方法二：使用快捷键：shift + command + O 实时预览 方法一：打开菜单：文件 -> 实时预览 方法二：使用快捷键：alt + command + P 扩展 方法：文件 -> 扩展管理器 https://registry.brackets.io/ #下载地址 快速编辑代码 - Emmet 改变样式 - Themes 折叠代码块 - Code Folding 自动格式化 - Beautify JS 帮助文档 - QuickDocsJS Emmet 快速代码编辑 快速生成html 输入 "!",按 "tab"键 连续输入元素名称和ID，Emmet会自动为你补全 p.foo -> tab键补全： <p class="bar" id="foo"></p> https://images2017.cnblogs.com/blog/1119605/201711/1119605-20171120151127680-400797068.png 来源： oschina 链接： https://my.oschina.net

工欲善其事，必先利其器 以下就是开发Vue常用插件： Vetur —— 语法高亮、智能感知、Emmet等 Live Server —— 实时预览 EsLint —— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间 Path Intellisense —— 自动路径补全 HTML CSS Support —— 让 html 标签上写css 智能提示当前项目所支持的样式 Beautify ——格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则 Bracket Pair Colorizer ——给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 open in browser ——直接右键项目单击启动 来源： oschina 链接： https://my.oschina.net/coderzpw/blog/3168481

示例： div#box>p.title+ul.list>li.child$*3{我是第$个}^div#box2 或者 #box>p.title+(ul.list>li.child$*3)+#box2 一、子节点（>），兄弟节点（+），上级节点（^） div>ul>li^div (这里的^是接在li后面所以在li的上一级，与ul成了兄弟关系,当然两个^^就是上上级） <div> <ul> <li></li> </ul> <div></div> </div> 二、重复（*） 用“$”符号实现1到n的自动编号（“*”实现多个元素） 三、 分组 () 四、隐式标签 五、css缩写 六、属性（[attr]） 参考： https://blog.csdn.net/fghsfeyhdf/article/details/78069259 https://www.cnblogs.com/dirgo/p/10239161.html https://blog.csdn.net/qq_33744228/article/details/80910377#commentBox 来源： oschina 链接： https://my.oschina.net/u/3982771/blog/3158577