Sublime Text 3 —— 插件

常用插件

• AutoFileName
  在输入文件的时候提示文件路径，以免手动输入错误

• Babel
  支持ES6

• ConverToUTF8
  支持GBK等编码的正常展示

• Emmet
  前端神器，必装

• Jade
  支持jade

• Modific
  提示与上次commit之间的改动，并高亮提示

• Sass
  支持sass
  PS: 使用sass作为文件后缀的时候，每次打开都会发现syntax为ruby html，此时选择View -> Syntax -> Open all with current extension as… -> Sass（必须保证sass文件为Active Tab），之后再次就会发现syntax显示为Sass了

• Vue Syntax Highlight
  支持Vue

• ESLint
  js代码检查
  需要安装
  ST: sublime lint, SublimeLinter, SublimeLinter-contrib-eslint
  NPM: eslint, babel-eslint(可能需要babel, babel-cli, babel-core, babel-preset-es2015等, 没单独测试过)
  点击Preferences -> Package Settings -> SublimeLinter -> Setting-User打开配置文件（首先将Setting-Default中的配置信息拷贝过来）
  将debug改为true，并添加以下内容

  "linters": {
      "eslint": {
           "@disable": false,
           "args": [],
           "excludes": []
       }
   }

  windows系统中还需在paths.windows中添加eslint.cmd的全局路径
  osx中则需要保证npm全局目录添加到全局变量
  之后在工程下添加.eslintrc就可以进行eslint检查了

  // 这是我的eslint配置
  {
      "parser": "babel-eslint",
      "rules": {
          "indent": [
              2,
              "tab"
          ],
          "quotes": [
              2,
              "single"
          ],
          "semi": [
              2,
              "always"
          ],
          "no-console": 0
      },
      "env": {
          "es6": true,
          "node": true,
          "browser": true
      },
      "extends": "eslint:recommended"
  }

• tern_for_sublime
  js代码提示神器，支持ES6的module
  安装完成后进入到sublime text3 -> package -> tern_for_sublime执行npm i
  点击Preferences -> Package Settings -> Tern -> Setting-User打开配置文件（首先将Setting-Default中的配置信息拷贝过来）
  将tern_argument_hints和tern_argument_completion这两个key的值修改为true
  点击Preferences -> Setting-User添加以下配置

  "auto_complete_triggers":
  [
      {
          "characters": "<",
          "selector": "text.html"
      },
      {
          "characters": ".",
          "selector": "source.js"
      }
  ]

  之后在工程目录下添加.tern-project配置文件就可以进行代码提示了

  {
      // 支持BOM和ES6
      "libs": ["browser", "es6"],
      "loadEagerly": [
          "将js目录引入"
      ],
      "plugins": {
          // 支持ES6 Module
          "es_modules": {}
      }
  }