• 玩转 sublime3 第二弹 ES6环境


    安装node
      node作为JS的运行环境必须安装
      文件下载:https://nodejs.org/dist/v6.11.4/node-v6.11.4-x64.msi
      备注:可以去官网 https://nodejs.org/en/ 获取最新的版本

      安装完node之后NPM也会被安装,NPM:node包管理工具

    安装babel插件
      Sublime3才有的插件,支持ES6、JSX语法高亮。  
      安装Babel Snippets插件
      定义了React快捷输入模版

    安装JsFormat插件
      配置使其支持JSX语法格式化。
      {
        "e4x": true, //支持jsx格式化
        "format_on_save": true//保存立即格式化
      }

    安装node插件
      node插件可以在sublime中运行js脚本
      修改Nodejs.sublime-build文件的配置为如下
      {
        "cmd": ["node", "$file"],
        "file_regex": "^[ ]*File "(...*?)", line ([0-9]*)",
        "selector": "source.js",
        "shell": true,
        "encoding": "GBK",
        "windows":
        {
          "shell_cmd": "taskkill /f /im node.exe >nul 2>nul & node $file"
        }
      }

    代码检查
      安装SublimeLinter插件
        它的作用是检查代码语法是否有错误

      JS语法检查需要安装SublimeLinter-jshint插件
        SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件,实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。
        所以需要安装jslint的node包:npm install -g jshint

      JSX语法检查需要安装SublimeLinter-jsxhint插件
        SublimeLinter-jshint 是基于 nodeJS 下的 jsxhint 的插件,实际上 SublimeLinter-jsxhint 调用了 nodeJS 中 jsxhint 的接口来进行语法检查的。
        所以需要安装jsxhint的node包:npm install -g jsxhint

      Css语法检查需要安装SublimeLinter-csslint
        SublimeLinter-csslint 也是基于 nodeJS 下的 csslint 的插件,实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。
        所以需要安装csslint的node包:npm install -g csslint

      安装SublimeLinter-contrib-eslint插件
        eslint可以支持js、jsx、es6(es2015)等代码的检测
        需要安装node依赖包:
        npm install eslint -g
        npm install babel-eslint -g
        在项目工程根目录新建.eslintrc,输入
        {
          "env": {
            "browser": true,
            "node": true,
            "es6": true
          },
          "parser": "babel-eslint",
          "ecmaFeatures": {
            "jsx": true
          },
          "rules": {
            "semi": [2, "always"],
            "quotes": [2, "single"]
          }
        }

    在subime菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。

  • 相关阅读:
    CCF CSP 201403-2 窗口
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
    Ethical Hacking
  • 原文地址:https://www.cnblogs.com/lvxiaowei/p/7631716.html
Copyright © 2020-2023  润新知