Sublime Text内运行javascript(ES6)及代码检查

原创 2016年08月29日 09:49:30

运行javascript

前言
调试js代码经常是在浏览器中完成的, 如果编辑器也能完成部分的调试工作, 那我相信前端和node的世界将美好很多. OK, 先上图:

这里写图片描述

实现

  1. 列表内容

首先安装nodejs
当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安装时自动添加或者询问是否添加)

  1. 添加build system

在sublime text中依次打开Tools -> Build System -> New Build System… 粘贴以下代码后保存(如Node.sublime-build), 然后把Build System设成Automatic

{
    "cmd": ["node", "--use-strict", "--harmony", "$file"],
    "selector": "source.js"
}

或者如下:

{
    "cmd": ["node", "$file"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "shell": true,
    "encoding": "utf-8",
    "windows": {
        "cmd": ["taskkill /F /IM node.exe >nul 2>nul & node", "$file"]
    },
    "linux": {
        "cmd": ["killall node; node", "$file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; node $file"]
    }
}

或者如果你安装了babel也就是es6语法,可以这样:

$ npm install -g babel
{
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node \"$file\""]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    }
}

说明

在以上的build文件中(Node.sublime-build), node是执行命令, –harmony和–use-strict是执行参数, $file是当前文件名, 所以一次build操作实际上相当于在命令行中执行了node –use-strict –harmony filename. –harmony表示启用ES Harmony features, 而这些features目前只能在strict模式下运行, 所以需要同时添加use-strict参数(详见what-is-extended-mode).
其实网上有很多教程,但是不少朋友说有点小问题,
比如一定要选择刚才新建的 javascript 编译系统才能执行。
其实是因为网上很多地方把 “selector”: “source.js”, 写成了 “selector”: “source.javascript”,
这样他就不能根据 后缀名 自动选择编译系统了。
还有很多人运行后得到的结果是乱码,其实这个问题确实不容易解释。。
但是我可以告诉你怎么调。
看到 “encoding”: “utf-8”, 这个了吧,现在是 utf-8 如果你遇到乱码的情况,改成 gbk 即可。
或者将cmd命令参数改一下:

"cmd": ["taskkill", "/f", "/im node.exe", ">nul", "2>nul", "&", "babel-node", "$file"]

或者

"cmd": ["taskkill", "/f", "/im node.exe", ">nul", "2>nul", "&", "babel-node", "$file"]

还有就是window运行的文件路径中不能有中文字符。

如果不想启用es6的特性,把build文件更改成以下代码保存即可.

{
    "cmd": ["node", "$file"],
    "selector": "source.js"
}

使用
在sublime test中新建一个test.js文件, 然后输入你的测试代码, 比如:

for (let i = 0; i < 3; i++) {
console.log(‘i:’, i);
}
使用快捷键ctrl + b, 将得到以下执行结果:

i: 0
i: 1
i: 2
[Finished in 0.1s]
注: 文件必须是存在于磁盘中的, 而不是untitled的, 否则sublime无法找到相应的文件.

以上.

摘自:https://segmentfault.com/a/1190000002291126
http://www.cnblogs.com/52cik/p/sublime-runjs.html
http://www.cnblogs.com/52cik/p/sublime-text-run-es6.html
http://www.tuicool.com/articles/jM7j6jM

代码检查

1.首先安装SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint插件。

2.然后命令行全局安装

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint
3.以ES6语法检查为例,在项目工程根目录新建.eslintrc,输入

{
“parserOptions”: {
“ecmaVersion”: 6,
“sourceType”: “module”,
“ecmaFeatures”: {
“jsx”: true
}
},
“rules”: {
“semi”: [“error”, “always”]
}
}
详细配置参考 http://eslint.org/docs/user-guide/configuring

4.打开Sublime3,菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。注意:当使用es6开发时务必把jshint关掉,否则报一堆警告错误。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Sublime3玩转ES6+ReactJs

原文 (http://ued.fanxing.com/emmet/)前言Webpack+React+ES6无疑是目前最火热的开发模式了,为了与时俱进,开始对它进行探索和学习。工欲善其事必先利其器,众...
  • babybk
  • babybk
  • 2016年08月22日 18:04
  • 7847

Sublime Es6教程1-环境搭建

因为现在网上的教程都不靠谱,于是决定自己跳坑自己写,分为三块来玩: 一、环境搭建 二、语法讲解 三、项目实战 很多时候,你想搞一个东西,却因为环境没有搭建好,而不能很开森的探索未知...
  • ae6623
  • ae6623
  • 2016年04月04日 14:31
  • 4328

Sublime Es6教程2-基本语法

2.基本语法 let, const, forEach,for of class, extends, super arrow functions, template string...
  • ae6623
  • ae6623
  • 2016年04月04日 14:32
  • 1234

sublime text中<script type="text/ecmascript-6">如何代码高亮并支持语法?

1、在package control里面进行插件的安装 ES6语法高亮的插件是JavaScriptNext 2、vue中遇到过类似的问题, 安装 vue-syntax-highlight 插件 ...

为Javascript 开发设置Sublime Text 3

安装 Sublime Text 3Ubuntu在线安装apt-get install python-software-properties add-apt-repository ppa:webupd8...

es6在window环境下的应用以及在sublime Text3里的使用。

ES6在window下的配置使用以及在sublime Text中的使用

es6 javascript的ESLint 代码检测

ESLint 是一个语法规则和代码风格的检查工具, 可以用来保证写出语法正确、 风格统一的代码。 首先, 安装 ESLint。 $ npm i - g eslint然后, 安装 Airbnb 语法...

Sublime Text 3 支持的热门插件推荐

参考文章:http://www.moomn.com/archives/68 JS插件 SublimeLinter 安装方法: http://gaohaoyang.github.io/2015/03...
  • jkguang
  • jkguang
  • 2015年08月31日 14:42
  • 1434

sublime +react+es6开发环境

Babel Sublime3才有的插件,支持ES6、JSX语法高亮。 菜单->View->Syntax->Open all with current extension as...->Babel-...
  • ldc726
  • ldc726
  • 2016年08月08日 09:10
  • 1324

Sublime Text 3 写js智能提示插件

新版的Sublime Text 3在自动从网上安装插件时,找不到Andyjs2这个写js时的
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Sublime Text内运行javascript(ES6)及代码检查
举报原因:
原因补充:

(最多只允许输入30个字)