zoukankan      html  css  js  c++  java
  • 玩转 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检查规则。

  • 相关阅读:
    IIS 浏览aspx页面出现无法显示XML页的解决方法分享
    好看的导航菜单
    C# FileUpload使用过程遇到的问题
    javascript之数组操作
    浅谈.NET下的多线程
    项目分页通用页
    npoi
    react webpack.config.js的配置及注释
    JS 解析Json 方法
    json解析
  • 原文地址:https://www.cnblogs.com/lvxiaowei/p/7631716.html
Copyright © 2011-2022 走看看