获取Facebook的react.js库JSX语法与jslint很好地玩?

我正在玩Facebook的react.js库。 我正在尝试使用他们的JSX语法来描述如何创build一个视图。

/** @jsx React.DOM */ var HelloMessage = React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent(<HelloMessage name="John" />, mountNode); 

JSLint显然不喜欢这个(“期待一个标识符,而是看到'<';” – JavaScript语法错误),所以我怎么解决这个在我的.jshintrc文件?

(更新:这个post是从2013年开始的,现在已经过时了)

我使用JSHint + JSX。

它不应该需要JSHint的分支,应该有一种方法来告诉JSHint禁用所有代码块的警告。 不幸的是,没有这种方法来禁用所有的警告,只有一组特定的警告,所以我可能会提交一个拉请求来添加这个,或者更改linters。 更新: 我们提交了一个被接受的拉取请求 。

正如你所指出的,Facebook和Instagram使用的工作stream程是从命令行的IDE外部进行。

另一种select是将所有JSX模板提取到自己的文件中,并将其作为范围的函数,而不是存在于隐式词法范围内。 我们试了一下,不喜欢样板的数量。

(我不隶属于React团队)

我试图在这个主题上遵循Dustin和STRML的build议,这里是最适合我的。

开发设置

我用SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint使用Sublime Text。
这些都是非常好的插件,可以让我在保存文件时看到错误, 包括 JS和JSX文件:

这些插件尊重您的项目的.jshintrc ,我不能推荐他们足够的。

确保遵循所有三个软件包的安装说明,否则它们将不起作用:

  • 安装SublimeLinter很简单( 说明 );

  • SublimeLinter-jshint需要系统中的全局jshint指令 );

  • SublimeLinter-jsxhint需要系统中的全局jsxhint ,以及Packages/JavaScript说明 )中的JavaScript(JSX)包 。

您可以将linterconfiguration为每隔几秒执行一次,保存文件或手动执行。

构build步骤,提交钩子等

我们使用JSHint作为Git工作stream程的一部分,并作为强制执行指南的构build步骤。 我们可以使用jsxhint,但我们想继续使用grunt-contrib-jshint,所以这不是一个选项。

现在, react转换之后 ,我们将正常的jshint作为构build步骤运行,所以它只处理输出的JS文件。

如果有人分叉了grunt-contrib-jshint并创build了一个可以与jsxhint工作的版本,那将是一件jsxhint ,但是这对我来说不是一件容易的事情。 (更新:有人这样做,但我没有testing过。)

忽略生成的代码中的违规行为

JSX编译器生成的代码打破了我们的一些惯例。

我不想用Dustinbuild议的 ignore:startignore:end ,因为这会有效地禁用所有的内部render方法。 在我的书里这是一个坏主意。 例如,从linting中排除render方法使linter认为我不使用一些我声明的库和子组件require在文件的顶部。 因此,忽略事情的需要从render方法扩展到文件的其余部分,这就ignore:start的目的ignore:start完全ignore:start

相反,我使用JSX编译器(当前)为我分配的三个JSHint选项显式地装饰每个render方法:

 render: function () { /* jshint trailing:false, quotmark:false, newcap:false */ } 

对我来说这已经足够了。 为您的.jshintrc这可能需要一些调整。

JsxHint和JSHint不是用于编写JSX的最佳工具。 JSHint不支持JSX,所有JsxHint都会转换JSX,然后在转换的代码上运行JSHint。 我一直在使用(并强烈推荐) ESLint与React插件 。 这是更好的,因为Eslint可以使用像esprima-fb或者babel-eslint这样的自定义分析器来parsing任何Javascript的风格(见下面的更新)。

示例.eslintrc文件:

 { "parser": "esprima-fb", "env": { "browser": true, "node": true }, "rules": { "no-mixed-requires": [0, false], "quotes": [2, "single"], "strict": [1, "never"], "semi": [2, "always"], "curly": 1, "no-bitwise": 1, "max-len": [1, 110, 4], "vars-on-top": 0, "guard-for-in": 1, "react/display-name": 1, "react/jsx-quotes": [2, "double", "avoid-escape"], "react/jsx-no-undef": 2, "react/jsx-sort-props": 0, "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1, "react/no-did-mount-set-state": 2, "react/no-did-update-set-state": 2, "react/no-multi-comp": 0, "react/no-unknown-property": 1, "react/prop-types": 2, "react/react-in-jsx-scope": 1, "react/self-closing-comp": 1, "react/wrap-multilines": 2 }, "ecmaFeatures": { "jsx": true }, "plugins": [ "react" ], "globals": { "d3": true, "require": "true", "module": "true", "$": "true", "d3": "true" } } 

UPDATE

esprima-fb将很快被Facebook弃用。 使用babel-eslint作为eslint的parsing器。 了解更多关于如何设置Babel&Eslint与React配合使用的好地方就是这个Github项目 。

参见JSXHint , JSHint的一个包装器,我写了一些来自react-tools的输出。 这是从忽略一个线块,因为它实际上会欺骗生成的JavaScript的一步。

它可以通过SublimeLinter与这个插件一起使用Sublime Text。

维护回购的人非常有帮助。 你只需要运行它扔JSX转换产生有效的JavaScript,除非有人创build一个jshint分支。 如果有足够的兴趣,它可能会被放在未来释放反应框架的路线图上。 可以看看这里的覆盖线程。

我使用grunt + react-tools + jshint来为使用react-tools构build的.js文件进行皮毛处理。 当把你的.jsx转换成.js时,react-tools的输出对于保持你的间距,缩进等是非常好的,所以它会给你一个准确的文件来防止。

按照正常的方式安装grunt。 然后安装grunt-contrib-watch,react-tools,grunt-react和grunt-contrib-jshint。

 npm install grunt-contrib-watch react-tools grunt-react grunt-contrib-jshint --save-dev 

这里是一个示例grunt文件:

 'use strict'; module.exports = function (grunt) { // Project configuration grunt.initConfig({ // Task configuration jshint: { options: { jshintrc: true, }, react: { src: ['react/**/*.js'] } }, react: { files: { expand: true, cwd: 'react/', src: ['**/*.jsx'], dest: 'react/', ext: '.js' } }, watch: { jsx: { files: ['react/**/*.jsx'], tasks: ['react', 'jshint:react'] } } }); // These plugins provide necessary tasks grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-react'); // Default task grunt.registerTask('default', ['react', 'jshint:react']); }; 

在这个文件中,运行“grunt”会将.jsx编译为.js,然后对.js文件进行lint。 每次保存后可以运行“grunt watch”运行。

以这种方式运行时,大部分通常的.jshintrc设置都能正常工作。 我最初遇到了一些问题,但大部分都是通过更改.jsx文件来解决的。 对于exapmle,我有“newcap”设置为true。 当我遵循React教程的命名约定,并大写标签的第一个字母时,会抛出一个lint错误。 标签的第一个字母被低位套pipe固定。

我不得不在我的.jshintrc中设置“拖尾”:false。 生成的.js文件将标签转换为Javascript的尾部空格。 我还没有想出是否有反应工具configuration来改变这一点。 如果您不想更改.jshintrc,可以使用Dan的post中描述的方法。

除了linting,这个过程还有助于解决.jsx转换为.js的问题。

这个过程的问题是你不能在编辑器中input.jsx文件。 但保持打开terminal窗口,您可以在编辑时看到是一个有用的替代品。 用Vim和Grunt在不同的窗格中使用TMUX是我首选的方法。

Amey的答案是正确的,但也可以在今天更新:

eslinteslint-plugin-react现在支持es6 + jsx +,所以只有在使用类属性,装饰器,asynchronous/等待,types等特定的东西时才需要使用babel-eslint

示例.eslintrcconfiguration为react + jsx + es6没有babel-eslint:

 { "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "rules": { "semi": 0 }, "plugins": [ "react" ], "extends": ["eslint:recommended", "plugin:react/recommended"] } 

您可以查看eslint-plugin-react指令以获取更多详细信息。