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关掉,否则报一堆警告错误。

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

相关文章推荐

详解 ESLint 规则,规范你的代码

在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的 一个前端程序猿的Sublime Text3的自我修养 ,这篇博客的朋友,肯定知道在当时我使用 SublimeLinter-...

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

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

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

Sublime Es6教程1-环境搭建

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

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

运行javascript前言 调试js代码经常是在浏览器中完成的, 如果编辑器也能完成部分的调试工作, 那我相信前端和node的世界将美好很多. OK, 先上图:实现 列表内容 首先安装nodejs...

如何在sublime text运行javascript

在Console模式下,浏览器不仅可以编辑也可以运行js。 大部分场景下,我们都是在IDE编辑保存,然后在浏览器打开预览效果。 在web前端的领域,sublime text成为了我编辑javasc...

Sublime Text 编译运行Kotlin

kotlin最近是火了,所以想试试看,当然 IntelliJ 是非常好用的啦,但是打开有点慢啦,对于我这种刚刚接触Kotlin的小白来说。。。(我就是急性子0.0.) 所以想还是试试能不能用Subli...

Sublime 下运行javascript

在sublime中,我们可以通过Node.js运行javascript,具体做法如下: 第一步:安装node.js 你可以通过命令行node -v查看是否安装node.js,如果已经安装,则会出现...

使用Sublime Text快速编译运行java程序

轻量级的sublime text用起来不卡,但是用sublime text编写Java的时候,需要用cmd编译运行java程序,这里轻松配置快捷键快速编译运行编写的java程序

代码编辑器Sublime Text

Sublime Text  之后详细介绍自己的使用心得,先上套话: Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能,例如:迷你地图,...

Sublime Text 3编译运行java源代码方法

配置Sublime Test 3中的java使其编译并运行
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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