首页 > 编程知识 正文

写jshint代码的简单介绍

时间:2023-12-29 20:31:46 阅读:330645 作者:PNQK

本文目录一览:

用什么编辑器写javascript最舒服呢?

目前前端使用率最高的就是sublime 和 webstorm了,当然了还有visual ,DW, 等等。下面仅介绍一些sublime和webstorm。

1.Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

2.WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

功能编辑

JavaScript

· 基于DOM,特定浏览器完成

· 编码导航和用法查询

· 支持ECMAScript

· 支持CoffeeScript

· 支持结点

· JavaScript重构

· JavaScript单元测试

· 代码检测和快速修复

· JSLint/JSHint

· 基于 Mozilla的JavaScript调试器

其他用途

· 批量代码分析

· 编码语言混合或内混

· 拼写检查器

· 重复代码检测器

编辑语言

· 支持HTML5

· css/js

· 检验和快速修复

· Zen编码

· 显示内容

· 显示应用的风格

便捷的环境

· HTML5样本文件和其他Web应用程序模板

· FTP和远程文件同步

· 集成了版本控制系统

· 本地记录

优势功能编辑

智能的代码补全

支持不同浏览器的提示,还包括所有用户自定义的函数(项目中)

代码补全包含了所有流行的库,比如:JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

代码格式化

代码不仅可以格式化,而且所有规则都可以自己来定义

html提示

大家经常在js代码中编写html代码,一般来说十分痛苦,不过有了智能提示,就爽多了。而且html里面还能有js提示。

联想查询

只需要按着Ctrl键点击函数或者变量等,就能直接跳转到定义;可以全

代码导航和用法查询 (8张)

项目查找函数或者变量,还可以查找使用并高亮。

代码重构

这个操作有些像Resharper,熟悉Resharper的用户应该上手很快,支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。

代码检查和快速修复

可以快速找到代码中的错误或者需要优化的地方,并给出修改意见,快速修复。

代码调试

支持代码调试,界面和IDEA相似,非常方便。

代码结构浏览

可以快速浏览和定位

代码折叠

功能虽小,不过胜在方便高效

包裹或者去掉外围代码

自动提示包裹或者去掉外围代码,一键搞定

jshint到底该怎么用呢?sublime text3中又该怎么使用

系统:win7 + sublime text3 + Node.JS Sublime Text需安装插件:SublimeLinter 和 Sublimelinter-jshint。 Node.JS需安装包:npm install -g jshint 如果都是默认安装,以上应该就能用了。 如果Node没有安装在默认位置,在菜单里Tools - Subli

sublime3怎么安装和使用jshint

安装 SublimeLinter

如同其他插件一样使用 Package Control 来安装。

按下 Ctrl+Shift+p 进入 Command Palette

输入install进入 Package Control: Install Package

输入SublimeLinter。进行安装.

安装完成后可以看到这样一段话:

Welcome to SublimeLinter, a linter framework for Sublime Text 3.

* * * IMPORTANT! * * *

SublimeLinter 3 is NOT a drop-in replacement for

earlier versions.

Linters *NOT* included with SublimeLinter 3,

they must be installed separately.

The settings are different.

* * * READ THE DOCS! * * *

Otherwise you will never know how to install linters, nor will

you know about all of the great new features in SublimeLinter 3.

For complete documentation on how to install and use SublimeLinter,

please see:

可以看到具体的 Linters 组件不被包含在 SublimeLinter 3 中,所以我们要额外独立安装组件。

可以针对不同的语言安装不同的组件。

JavaScript 语法检查

SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件,实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。

安装 SublimeLinter-jshint

为了让 JavaScript 代码有语法检查,我们安装 SublimeLinter-jshint

同样的方法,我们安装 SublimeLinter-jshint

按下 Ctrl+Shift+p 进入 Command Palette

输入install进入 Package Control: Install Package

输入SublimeLinter-jshint。进行安装.

如下图

安装完成后我们可以看到下面的一段话

SublimeLinter-jshint

-------------------------------

This linter plugin for SublimeLinter provides an interface to jshint.

** IMPORTANT! **

Before this plugin will activate, you *must*

follow the installation instructions here:

安装 nodeJS 和 jshint

在插件开始工作之前,我们必须再看一下上述插件的安装说明

通过 SublimeLinter-jshint 的说明 我们可以看到,这个组件依赖于 nodeJS 下的 jshint,所以我们安装 nodeJS 环境和 nodeJS 下的 jshint。

安装 Node.js

通过 npm 安装jshint

在命令行下输入如下代码,完成安装

npm install -g jshint

安装完成后命令行中出现如下的信息

C:UsersAdministratorAppDataRoamingnpmjshint - C:UsersAdministratorAppDataRoamingnpmnode_modulesjshintbinjshint

jshint@2.6.3 C:UsersAdministratorAppDataRoamingnpmnode_modulesjshint

├── strip-json-comments@1.0.2

├── underscore@1.6.0

├── exit@0.1.2

├── shelljs@0.3.0

├── console-browserify@1.1.0 (date-now@0.1.4)

├── htmlparser2@3.8.2 (domelementtype@1.3.0, entities@1.0.0, domhandler@2.3.0, readable-stream@1.1.13, domutils@1.5.1)

├── minimatch@1.0.0 (sigmund@1.0.0, lru-cache@2.5.0)

└── cli@0.6.6 (glob@3.2.11)

可以查看 jshint 版本,已确认安装完成。

C:UsersAdministratorjshint -v

jshint v2.6.3

现在,恭喜你,我们使用 Sublime 编辑 JavaScript 文件,就会有语法检查了!

在编辑过程中,会有如下提示

点击提示点后,Sublime 状态栏也会有相应的说明

css 语法检查

与 jshint 同理,SublimeLinter-csslint 也是基于 nodeJS 下的 csslint 的插件,实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。

安装 SublimeLinter-csslint

同样的方法。

按下 Ctrl+Shift+p 进入 Command Palette

输入install进入 Package Control: Install Package

输入SublimeLinter-csslint。进行安装.

如下图

安装完成后我们可以看到下面的一段话

SublimeLinter-csslint

-------------------------------

This linter plugin for SublimeLinter provides an interface to csslint.

** IMPORTANT! **

Before this plugin will activate, you *must*

follow the installation instructions here:

在使用插件之前,必须遵循上述网址中的安装说明

在 nodeJS 下安装 csslint

进入上述的 GitHub 地址,csslint 的说明页。我们知道了和 jshint 一样,csslint 也是基于 nodeJS 下的 csslint 来使用的。

这里安装 nodeJS 过程省略。

只需用 npm 安装 csslint 即可。

在命令行中输入

npm install -g csslint

安装完成后命令行中出现如下的信息

C:UsersAdministratorAppDataRoamingnpmcsslint - C:UsersAdministratorAppDataRoamingnpmnode_modulescsslintcli.js

csslint@0.10.0 C:UsersAdministratorAppDataRoamingnpmnode_modulescsslint

└── parserlib@0.2.5

可以查看 csslint 版本,已确认安装完成。

C:UsersAdministratorcsslint --version

v0.10.0

现在,恭喜你,我们使用 Sublime 编辑 css 文件,就会有语法检查了!

在编辑过程中,会有如下提示

点击提示点后,Sublime 状态栏也会有相应的说明

如何把 Sublime 变身为 JavaScript 编辑器

Sublime 是一款非常流行并且强大的文本编辑工具, 除了它提供的基础功能, 它还支持第三方插件, 配置适合我们工作流的插件可以让使用 Sublime 的时候更加舒服。

插件控制中心

首先,我们需要安装 Package Control, 进入它的安装主页

大家可以看到:

正如提示中描述的, 在 Sublime 中按下 Ctrl + ` 快捷键来打开控制台, 然后把页面中的那段脚本复制进去,然后执行就 OK 了。 脚本的具体内容大家一定要从 Package Control 的主页去获取, 因为这个脚本随时可能会更新, 官方主页上的一直是最新的。

成功安装后, 就可以看到这个提示了:

接下来, 按下 Command + Shift + P 键, 打开命令面板, 并且输入 install, 可以看到 Install Package 选项:

按下回车打开它, 就可以看到可用插件的列表了

一切就绪后, 可以开始配置插件了。 给大家推荐几个我在用的插件。

JSHint Gutter 插件

JSHint 是非常流行的 JS 语法检查工具, 它是一套独立的库, 并且提供命令行版本。 它可以帮助你写出更加符合 JS 标准规范的代码, 我们可以调用 jshint 命令并传入我们的代码文件, 它就会帮我们找出不符合规范的代码,并且给出提示。

并且 Sublime 也提供了 JSHint 的支持, 我们只需要安装插件, 就可以将 Sublime 和 JSHint 无缝集成起来了。

按照我们刚才的方式打开插件列表, 并且输入 jshint,就可以看到 JSHint Gutter 插件了:

直接按下回车安装。 JSHint 插件默认不会自动执行, 但我更偏好让他在代码编辑中自动检测, 那么可以按下 Command + Shift + P 再次打开命令行面板, 然后输入 jsHint, 选择 Set Plugin Options 选项:

JSHint 插件的配置选项其实就是一个配置文件, 只需要将 lint_on_edit 属性设置为 true 它就会自动执行了:

这样, 当我们的代码有不符合对方的时候, 插件就会给出错误提示:

如果想看到这些错误的详细内容, 按下 Command + Shift + J 键来查看:

对于有代码洁癖的同学, 或者希望写出高质量代码的朋友来说,JSHint 都会是一个很不错的工具, 比较推荐。

JSDoc 插件

这个也是我比较喜欢的插件, JSDoc 顾名思义,就是一个文档注释插件。 比如我们可以向这样,只输入 /** 然后按下回车, JSDoc 就会根据下面函数定义生成注释模板:

另外,JSDoc 本身也是一套工具体系, 除了插件能帮助我们生成方便的注释模板之外, JSDoc 还能够根据这些注释输出标准化的 API 文档, 可谓一举两得。 JSDoc 插件的安装方式也都一样, 还是按照我们刚才的方法打开插件列表。

并且找到 DocBlockr, 然后安装即可。

良好的注释习惯, 也是写出高质量代码的一个保障。

结尾

这次跟大家聊了聊 Sublime 的插件, 插件几乎存在于很多开发工具中, 合理的使用插件会对我们的开发过程提供很多帮助。 但插件也不是越多越好,太多的插件有时也会造成混乱。 希望大家都向大牛的方向迈进~

jshint怎么忽略不输出警告,只显示语法错误

配置package/grunt-contrib-jshint,不需要的改成false

options :{jshintrc:{ "curly" : true, // true: Require {} for every new block or scope "eqeqeq" : true, // true: Require triple equals (===) for comparison "immed" : true, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` "latedef": true, // true: Require variables/functions to be defined before being used "newcap" : true, // true: Require capitalization of all constructor functions e.g. `new F()` "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee` "sub" : true, // true: Prohibit use of empty blocks "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks) "boss" : true, // true: Require all defined variables be used "eqnull" : true, // true: Requires all functions run in ES5 Strict Mode "globals": { "jQuery": true //可以使用jquery的函数

}

}

}

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。