Deprecated
JSXHint is, and always was, a bad hack to make JSX lintable in the early days of React. It will always be inferior to proper linters like ESLint because it is not able to lint JSX or ES6 syntax, it instead compiles to ES5 then lints. You may get weird linter errors, especially with more involved transforms.
Don't use JSXHint anymore if you can switch to ESLint.
JSXHint
A wrapper around JSHint to allow linting of files containing JSX syntax.
Accepts the same input as JSHint and emits the same output. Switches sent to jsxhint are forwarded on to jshint.
Glob parsing, ignores, and jshintrc parsing are all performed by jshint.
Automatically lints all files with the .js
and .jsx
extensions.
Rationale
This module is intended for use as part of
SublimeLinter-jsxhint,
but it can be used separately as a smart replacement for JSHint. It will automatically convert any file with
the jsx
extension into JS using react-tools
, then present the file to JSHint for validation.
Note that as of React 0.12, it is recommended to use the .jsx
file extension rather than the pragma in .js
files. If you are already using the .jsx
extension, add the option
--jsx-only
. This will skip attempted conversion of .js
files to JSX, but still lint those files.
This is useful for running an entire project.
JSXHint
is safe to use as a drop-in replacement for JSHint
, even when JSX files are not present in a project.
JSXHint
offers a simple workflow that accepts JSX files without modification.
Additionally, JSXHint
actually lints the object definitions generated by the JSX compiler, allowing you to catch
mistakes in your templates (such as undefined variables, syntax errors, and missing modules).
JSXHint
cli allows for pattern arrays via glob-all
Examples
# Lint entire project. JSXHint will only lint .js and .jsx files.
jsxhint .
# Lint files in `src` folder only.
jsxhint src
# Lint Project using only `.jsx` extension for JSX.
# Will lint .js files with jshint, .jsx files with jsxhint.
jsxhint --jsx-only .
# Basic globbing
jsxhint --config ./other-directory/.jshintrc src/foo/*.jsx
# Multiple patterns
jsxhint 'jsx/**/*' '!scripts/**/*' 'scripts/outlier.jsx'
# Common multiple patterns usecase - lint .js and .jsx, ignore modules and build
jsxhint '**/*.js*' '!node_modules/**/*' '!build/**/*'
# Accepts stdin with '-'
jsxhint - < src/file.jsx
# Exclude files
jsxhint --exclude excludeme.jsx src/foo/*.jsx
# Lint project using babel (previously 6to5)
# Note that you must explicitly install `babel` if you wish to use it.
jsxhint --babel src
Installation
npm install -g jsxhint
Usage
Usage:
jsxhint[OPTIONS] [ARGS]
Options:
-c, --config STRING Custom configuration file
--reporter STRING Custom reporter (<PATH>|jslint|checkstyle|unix)
--exclude STRING Exclude files matching the given filename pattern
(same as .jshintignore)
--exclude-path STRINGPass in a custom jshintignore file path
--filename STRING Pass in a filename when using STDIN to emulate config
lookup for that file name
--verbose Show message codes
--show-non-errors Show additional data generated by jshint
-e, --extra-ext STRING Comma-separated list of file extensions to use
(default is .js)
--extract [STRING] Extract inline scripts contained in HTML
(auto|always|never, default to never) (Default is never)
--jslint-reporter Use a jslint compatible reporter (DEPRECATED, use
--reporter=jslint instead)
--checkstyle-reporter Use a CheckStyle compatible XML reporter
(DEPRECATED, use --reporter=checkstyle
instead)
-v, --version Display the current version
-h, --help Display help and usage details
The above options are native to JSHint, which JSXHint extends.
JSXHint Options:
--jsx-only Only transform files with the .jsx extension.
Will run somewhat faster.
--babel Use babel (6to5) instead of react esprima.
Useful if you are using es6-module, etc. You must
install the module `babel` manually with npm.
--babel-experimental Use babel with experimental support for ES7.
Useful if you are using es7-async, etc.
--harmony Use react esprima with ES6 transformation support.
Useful if you are using both es6-class and react.
--es6module Pass the --es6module flag to react tools.
--non-strict-es6module Pass this flag to react tools.