webstrom 中启用emmet插件的方法

参考页面:https://www.jetbrains.com/help/webstorm/2016.2/enabling-emmet-support.html

Basics

Native Emmet support allows you to generate XML/HTML, JavaScript (JSX Harmony) and CSS structures based on abbreviations. WebStorm supports basic Emmet andEmmet version 1.1 features, such as:

  • New syntax for writing RGBA colors.
  • Implied attributes.
  • Default attributes.
  • Boolean attributes.
  • The Update Tag action.

Emmet is supported in HTML/XML, JavaScript (JSX Harmony) and in the CSS contexts. This support is configured separately on the HTMLJSX and CSS pages respectively.

Enabling and configuring native Emmet support in the HTML or XML context

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X. Expand the Editornode, and then click XML under Emmet. The Emmet page opens.
  2. To enable the Emmet support in the HTML or XML context, select the Enable XML/HTML Emmet check box.

    When this check boxes is cleared, all the other controls on this page become disabled.
  3. To have WebStorm show a pop-up window with a preview of the entered abbreviation before actually expanding it , select the Enable abbreviation preview check box.
  4. Specify how Emmet in WebStorm will treat URL addresses by selecting or clearing theEnable automatic URL recognition while wrapping text with <a> tag check box.
    • If this check box is cleared and you attempt to wrap an URL address with the <a> tag, WebStorm simply encloses the URL address in <a href=""></a> and positions the cursor inside the double quotes in the href attribute. For example, wrappinghttp://www.jetbrains.com will result in <a href="|">http://www.jetbrains.com</a>:
    • If this check box is selected and you attempt to wrap an URL address with the <a> tag, WebStorm inserts the URL address inside the double quotes as the value of the hrefattribute and encloses the URL in <a href="<wrapped URL>"></a>. For example, wrappinghttp://www.jetbrains.com will result in <a href="http://www.jetbrains.com">http://www.jetbrains.com</a>. Moreover, WebStorm highlights the wrapped URL green as a recognized URL:

Enabling native Emmet support in the JavaScript context

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X.
  2. Under the Languages and Frameworks node, click JavaScript, and select the language level JSX Harmony.
  3. Expand the Editor node, and then click JSX under Emmet. The JSX page opens.
  4. To enable the Emmet support in the JavaScript context, select the Enable JSX Emmetcheck box.

Enabling and configuring native Emmet support in the CSS context

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X. Expand the Editornode, and then click CSS under Emmet. The CSS page opens.
  2. To enable the Emmet support in the CSS context, select the Enable CSS Emmet check box.

    When this check boxes is cleared, all the other controls on this page become disabled.
  3. Configure the way unknown abbreviations are treated by selecting or clearing the Enable fuzzy search among CSS abbreviations check box: When this check box is selected, every unknown abbreviation will be scored against available template names. The match with the best score will be used to resolve the template. For example, with this option enabled, the following abbreviations can be equal to:
    • ov:h
    • ov-h
    • o-h
    • oh
  4. Configure the way unrecognized properties are treated by selecting or clearing theEnable expansion of unknown properties (‘unknown‘ to ‘unknown:;‘) check box:
    • When this check box is selected, any entered word will be expanded into the same word followed with a colon and a semicolon;
    • When this check box is cleared, only known properties (for example, color) will be expanded this way (color:;)
  5. Configure inserting browser-specific prefixes using the Auto insert CSS vendor prefixescheck box: If this check box is selected, the CSS properties listed in the table below are expanded into constructs that contain pre-pending vendor prefixes. Learn more at Vendor prefixes.

    If this check box is cleared, the entire table of properties is disabled.
  6. Configure the use of properties in different browsers using the Properties and vendor prefixes table. The table contains a list of CSS properties and vendor prefixes that correspond to various browsers.
    • To enable or disable a property in a browser, select or clear the check box under the browser column.
    • To add a new property to the list, click the Add button  or press Alt+Insert. Then type the name of the property in the dialog box that opens and enable it in the relevant browsers.
    • To delete one or more properties from the lsit, select them and press Remove  or press Alt+Delete.

当前我设置的快捷键为 ctrl+shift+alt+e

时间: 2024-10-11 02:43:52

webstrom 中启用emmet插件的方法的相关文章

eclipse中安装SVN插件的方法及SVN插件下载

eclipse中安装SVN插件的方法有好几种,这里只推荐比较简单便捷的一种: 下载SVN插件. SVN插件下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 选择下载哪个版本的SVN插件:site-1.8.22.zip 下载后,解压,将解压的全部文件拷贝至eclipse的安装目录里的dropins内:D:\develop\eclipse\dropins(我的是这个). 重启Eclipse即可出现S

Sublime Text3 Package Control和Emmet插件安装方法

因为初学前端,所以今天安装了Sumblime Text 3,然后就停不下来去找Package Control的安装方法. 网络上我找到并尝试过的方法有两种,我使用的是用Python代码去安装并成安装成功,在此记录安装过程.另一种下载Package Control安装包覆盖的办法没有成功(应该是个人操作问题). 1.将python代码以命令的方式去安装. 代码:import urllib.request,os; pf = 'Package Control.sublime-package'; ipp

visual studio code中使用emmet插件在.vue文件失效

使用visual studio code编辑.vue文件时,emmet插件无法使用,可以通过以下两种试解决: 1.文件→设置,在右侧窗口添加以下代码: "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" } 2.在.vue文件窗口的右下角,点击"vue"(提示信息:选择语言模式),然后选择".vue"

在Eclipse中安装python插件的方法

一个博士给了我一堆代码,原本以为是C++或者java写的,结果是python,我压根没学过呀,不过本着语言都是相通的原则,我硬着头皮开始学习Python,当然先学习安装IDE(以前学习一门新语言,我会从语法开始,现在则不然了,现在学习的语言比较多了,汇编.VB.C.Java.C++.JS.JSP....,语法都是大同小异,所以我觉得边开发边学习更是一种有效的学习方法),言归正传,开始安装Phthon IDE.因为在Eclipse中开发比较熟悉,所以就选择在Eclipse中安装pydev插件的方式

zend studio中安装Emmet插件后迅速编写html的方法

table>tr*3>th*1+td*3h1{hello}            <h1>hello</h1>a[href="xx.xxx.xxx(网址)"]{xxxxx(超链接名称)}                    <a href="www.baidu.com">百度</a>ul>li.item${haha $$}*4                                 <

APPCAN IDE中安装emmet插件

1.首先打开APPCAN IDE 2.帮助(help)-安装新软件(install New sofaWare) 3.打开Install窗口,点击 Add,在Add Repository窗口中,Name一览随便输入一个名字,然后再Location中输入 http://emmet.io/eclipse/updates/ 点击确定 4.选中emmet 然后一直next 中途需要等待还有一次需要同意安装的选择 5.下载完毕后,会提示确认安装窗口,点击OK ,等待安装完毕后,需要重启IDE

webpack中的extract-text-webpack-plugin插件使用方法总结

为什么要用 extract-text-webpack-plugin这个插件,这个插件可以为我们实现样式模块化,并且在打包的时候可以生成一个总得css文件.我是在react的项目中用到的.接下来怎么用呐? 1,首先我们npm安装 npm install extract-text-webpack-plugin --save-dev. 2,在webpack.config.js中进行配置 首先我们要引入 const ExtractTextWebpack = require("extract-text-w

在Ubuntu 18.04系统中启用SSH登录的方法

简介 Secure Shell(SSH)是Linux系统管理中的经常要用到的一种远程访问技术.在Ubuntu 18.04系统仓库中,已经收录了同为开源的OpenSSH,我们可以用它来为系统开启SSH访问功能. 具体方法 一.打开终端,输入以下命令安装OpenSSH服务: sudo apt-get install openssh-server 二.步骤一是在当前系统增加SSH服务,如果需要对SSH服务修改设置,可以用字处理工具编辑其配置文件,位于" /etc/ssh/sshd_config&quo

sublime text3 emmet 插件 安装方法,快捷键

preference->package control->install package> emmet 快捷键 http://docs.emmet.io/cheat-sheet/ ! tab 生成html基本格式 table tab 生成table的标签 a tab \ link tab  生成链接, 和css 链接 nav>ul>li 生成: <nav> <ul> <li></li> </ul> </nav&