atom实现vue高亮

安装必要插件

在Atom中实现Vue语法高亮需要安装language-vue插件。该插件为Vue文件提供语法高亮、代码片段和自动补全功能。

通过Atom的包管理器安装：打开Atom，进入Settings > Install，搜索language-vue并安装。

配置Vue文件关联

确保.vue文件默认使用Vue语法高亮。进入Settings > Core，在File Types部分添加vue到Custom File Types的text.html.vue中。

启用语法高亮

打开Vue文件后，检查右下角状态栏的语法模式是否为HTML (Vue)。若未自动识别，手动选择HTML (Vue)以启用高亮。

安装辅助插件

推荐安装以下插件增强Vue开发体验：

• atom-ide-ui：提供代码诊断、自动补全等功能。
• linter-eslint：集成ESLint检查Vue代码规范。
• emmet：快速生成HTML/CSS代码片段。

配置ESLint

在项目根目录创建或修改.eslintrc.js文件，确保包含Vue相关规则：

module.exports = {
  extends: [
    'plugin:vue/recommended'
  ],
  rules: {
    'vue/html-indent': ['error', 2]
  }
}

主题适配

部分主题可能对Vue语法支持不完善。推荐使用one-dark或atom-material-syntax等官方主题，或确认所选主题明确支持Vue。

检查更新

定期更新language-vue插件以获得最新语法支持。通过Settings > Updates检查并安装更新。