让ATOM编辑器的EMMET插件支持VUE文件的方法

最近一直使用ATOM编辑器。因为这是免费的，并且和GIT配合非常好用。关键的是可以从sublime无缝的转换到这个编辑器来使用。

有一个问题就是，我们在编辑.vue这样的文件的时候，emmet语法得不到支持。这让我很憋屈。终于找到了解决方法。在这里分享给大家。

我的环境是MAC，但应该在windows和linux下是一样的才对。

进入终端编辑配置文件

vim ~/.atom/keymap.cson

这个文件默认有大段的注释。不用管，我们把光标放到最后一行，按 o 在最后一行后面再插入一行，将下面的代码粘贴进去

‘atom-text-editor[data-grammar~="vue"]:not([mini])‘:
    ‘tab‘: ‘emmet:expand-abbreviation-with-tab‘

然后按 esc退出编辑模式，再输入:wq保存退出，然后重启atom。然后你就会发现，在.vue的文件下面，支持emmet语法啦

原资料出处：https://github.com/emmetio/emmet-atom/issues/364

时间： 2024-10-15 07:33:18

让ATOM编辑器的EMMET插件支持VUE文件的方法的相关文章

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

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

新手学习配置atom编辑器进行安装插件如script

本人想学一些关于node.js.javascript,初识atom编辑器,通过网上了解到atom编辑器可以支持很多插件.出于通过atom想单独调试javacript代码的目的,就想安装script插件,安装过程中出现很多错误,终于安装成功.安装atom插件,我所了解到的有两种方式,一种是使用atom自带的install packages,另一种是使用git clone 然后npm安装.本文主要记录下自己使用git clone的安装方法. 1.安装node.js,这一套不用多写多记,网上一搜发现有

Atom 编辑器 前端基本插件

Atom 编辑器插件 这个编辑器是github出品,现在处于免费试用期:如果是初学者,可以使用这个编辑器,插件安装很方便,只需要点菜单栏的File-Settings-Install,在搜索框中输入想要的插件名即可. ============================ activate -power-mode //震动,粒子效果,酷炫装逼必备,可在设置里关闭震动 Screen Shake-Enabled atom-html-preview //ctrl+shift+h 右侧打开预览,有bug

ATOM 编辑器使用扩展插件

汉化:chinakids的程序员写了一个名为 simplified-chinese-menu的汉化包,打开 packages –setting views–open –install 搜索simplified-chinese-menu进行安装即可汉化. 汉化 汉化成功后的效果 针对前端我介绍下插件(因人而异,大家可以安装别的插件看看) 方式:扩展 - 界面设置 - 安装插件/主题 输入插件的名称,安装重启即可: 插件介绍: 文件路径自动提示:autocomplete-paths html页面预览

Atom 编辑器常用的插件

atom 好用的插件 1,atom-beautify 代码格式化插件 2,Emmt html代码提示插件 3,file-icons 可以显示文件类型图标 4,minimap 类似于SublimeText中的右侧栏 5,open-html-in-browser 可以运行html,在浏览器中查看效果 6,open-terminal-here 在当前文件的目录中打开终端 7,terminal-plus 在atom中集成了终端,比run-in-terminal好用 8,vim-model 在atom中通

ajaxFileUpload.js插件支持多文件上传的方法

前提条件:ajaxFileUpload.js插件多文件上传步骤:1.修改源码,(源码只支持单个文件的上传):复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(newEle

vscode eslint插件对vue文件无效

vscode配置好了之后,只对.js文件提示 vue文件没有效果 改成如下配置就好了. "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix&q

atom编辑器手动安装插件

atom安装插件有三种方式: apm install ** 在ide中搜索 手动安装 我们介绍手动怎么安装第三方插件,打比方安装atom-ternjs,用于 Javascript 和 Node.js 的自动补全. 插件官网是https://atom.io/packages/atom-ternjs ,然后复制repo的地址 打开cmd 输入 cd ./atom/packages/ 输入git clone https://github.com/tststs/atom-ternjs.git ,这一步,

Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

一.Emmet的安装与介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML.CSS 的快速编写. 官网地址:http://emmet.io/ 官方文档:http://docs.emmet.io/cheat-sheet/ Atom的emmet介绍页面:https://atom.io/packages/emmet 1,使用Emmet的好处 通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动我们的生产