Facebook의 react.js 라이브러리 JSX 구문을 jslint로 잘 재생하려면?

Facebook의 react.js 라이브러리 JSX 구문을 jslint로 잘 재생하려면?

Facebook의 react.js 라이브러리를 가지고 놀고 있습니다.뷰 작성을 다음과 같이 설명하는 JSX 구문을 사용하려고 합니다.

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

React.renderComponent(<HelloMessage name="John" />, mountNode);

JSLint는 이것을 좋아하지 않는 것이 분명합니다(「식별자」를 예상하고 대신 「<」- JavaScript 구문 에러로 표시).그럼 어떻게 하면 이 문제를 회피할 수 있을까요?

저는 더스틴과 STRML의 조언을 따르려고 노력했습니다.그리고 여기 저에게 가장 잘 맞는 방법이 있습니다.

개발 셋업

SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint와 함께 SublimeText를 사용합니다.
JS 및 JSX 파일 모두 파일을 저장할 때 오류를 확인할 수 있는 매우 좋은 플러그인입니다.

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」.jshintrc★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

다음의 3개의 패키지의 인스톨 순서에 따릅니다.그렇지 않으면, 동작하지 않습니다.

• SublimeLinter 설치는 간단합니다(순서).

• SublimeLinter-jshint는 글로벌해야 합니다.jshint시스템 내(의견)

• SublimeLinter-jsxhint는 시스템 내 글로벌과 JavaScript(JSX) 번들이 필요합니다.Packages/JavaScript(의견).

몇 초마다 실행되도록, 파일 저장 시 또는 수동으로 린터를 구성할 수 있습니다.

빌드 스텝, 커밋 후크 등

우리는 JSHint를 Git 워크플로우와 가이드라인을 적용하기 위한 빌드 스텝의 일부로 사용하고 있습니다.jsxhint를 사용할 수도 있었지만 grunt-contrib-jshint를 계속 사용하고 싶었기 때문에 이 방법은 선택사항이 아니었습니다.

정상 입니다.jshint이후의 빌드 스텝으로서 reactJS에 대해서입니다.

누군가 그룬트-콘트리브-jshint를 포크로 만들어서jsxhint하지만 쉬운 작업이 아닌 것 같습니다.(업데이트: 누군가가 그렇게 했지만 테스트하지 않았습니다.)

생성된 코드의 위반 무시

JSX 컴파일러는 몇 가지 규약을 깨는 코드를 생성합니다.

는 고지싶싶요 i i i를 쓰고 않았다ignore:start ★★★★★★★★★★★★★★★★★」ignore:end Dustin이 제안한 바와 같이 내부 보풀을 효과적으로 제거할 수 있습니다.render 않은 생각이다.내 생각에 그것은 나쁜 생각이다.를 들어, 「」를 하고, 「」를 참조해 주세요.render가 lintining으로 한 라이브러리와 중 .require파일 맨 위에 있습니다.따라서 무시해야 할 필요성이 메서드에서 나머지 파일로 확산되어 완전히 목적을 달성하지 못하게 됩니다.

대신 제가 직접 직접 꾸미는 거예요renderJSX "JSint " ( " ) " 3 " JSHint " :

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

이 합니다.당신의 이 정도면 충분합니다..jshintrc조정이 필요할 수 있습니다.

JsxHint와 JSHint는 JSX를 보풀링하는 데 최적의 도구가 아닙니다.JSHint는 JSX를 지원하지 않으며 JsxHint는 JSX를 변환한 후 변환된 코드에서 JSHint를 실행합니다.리액트 플러그인과 함께 ESLint를 사용해 왔습니다(강력히 추천합니다).이것은 Eslint가 esprima-fb나 babel-eslint와 같은 커스텀 파서를 사용하여 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"
    }
}

갱신하다

esprima-fb는 곧 페이스북에 의해 폐지될 것이다.eslint의 파서로 babel-eslint를 사용합니다.Babel & Eslint가 React와 연계하도록 설정하는 방법에 대한 자세한 내용은 이 Github 프로젝트를 참조하십시오.

(갱신:이 게시물은 2013년부터 사용되었으며 현재는 사용되지 않습니다.)

저는 JSHint + JSX를 사용합니다.

JSHint의 포크는 필요하지 않습니다.JSHint에게 코드 블록에 대한 모든 경고를 비활성화하도록 지시하는 방법이 있을 것입니다.유감스럽게도 모든 경고를 비활성화하는 방법은 없고 특정 경고만 있기 때문에 이를 추가하거나 리너를 변경하기 위해 풀 요청을 제출할 수 있습니다.

업데이트: 풀 요청을 제출했지만 수락되었습니다.모든 경고를 비활성화하려면/*jshint ignore: start */ 부분, 시작 부분, 그리고 to to the to to to to to to to to to to to 。/*jshint ignore: end */끝내기 위해서요

지적하신 바와 같이 페이스북과 Instagram이 사용하는 워크플로는 명령줄에서 IDE 외부에 보풀이 있습니다.

다른 옵션은 모든 JSX 템플릿을 자체 파일로 추출하여 암묵적인 어휘 범위 내에 존재하는 대신 범위의 함수로 만드는 것입니다.시험해 봤는데 보일러 플레이트의 양이 마음에 안 들었어요.

(주의: 저는 React 팀에 소속되어 있지 않습니다.)

JSXHint 를 참조해 주세요.JSHint 주위에 래퍼를 붙여 출력을 보풀로 만듭니다.react-tools생성된 javascript를 실제로 보풀이 되므로 줄의 블록을 무시하는 것에서 한 단계 상승한 것입니다.

SublimeLinter를 통해 Sublime Text와 함께 사용할 수 있습니다.

리포(repo)를 유지하는 남자들은 엄청나게 도움이 된다.jshint의 포크를 만들지 않는 한 JSX 변환을 실행하여 유효한 Javascript를 생성하기만 하면 됩니다.충분한 관심이 있는 경우, 향후 대응 프레임워크의 릴리스 로드맵에 포함될 수 있습니다.커버의 실이 여기 보이는군요.

grunt + react-tools + jshint를 사용하여 react-tools로 작성된 .js 파일을 보풀이합니다.react-tools의 출력은 .jsx를 .js로 변환할 때 간격이나 들여쓰기 등을 유지하는 데 매우 좋기 때문에 정확한 파일을 얻을 수 있습니다.

설정하려면 , 통상의 방법으로 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 파일이 린트됩니다.저장 후 매번 "grunt watch"를 실행하여 실행할 수 있습니다.

이 방법으로 실행할 때는, 통상의 .jshintrc 설정의 대부분이 기능합니다.처음에는 몇 가지 문제가 발생했지만 대부분은 .jsx 파일을 변경하여 해결되었습니다.예시로 "newcap"을 true로 설정했습니다.리액트 튜토리얼의 명명 규칙에 따라 태그의 첫 글자를 대문자로 표시했을 때 보풀 오류가 발생했습니다.태그의 첫 글자를 소문자로 표시하여 수정했습니다.

내 .jshintrc에서 "tracking"을 설정해야 했습니다.생성된 .js 파일에는 태그를 Javascript로 변환하는 후행 공백이 있습니다.이를 변경할 react-tools 구성이 있는지 파악하지 못했습니다..jshintrc를 변경하지 않으려면 Dan의 게시물에 설명된 방법을 사용할 수 있습니다.

이 프로세스는 보풀뿐만 아니라 .jsx에서 .js로 변환하는 데에도 도움이 됩니다.

이 프로세스에서 발생하는 문제/결과는 .jsx 파일을 에디터에서 볼트할 수 없다는 것입니다.그러나 편집 중에 볼 수 있는 터미널 창을 열어 두는 것이 도움이 됩니다.다른 페인으로 Vim과 Grunt를 조합한 TMUX를 사용하는 것이 좋습니다.

Amey의 답변은 정확하지만 오늘 업데이트될 수도 있습니다.

eslint와 eslint-plugin-react 쌍은 es6+jsx+react를 지원하므로 babel-eslint가 필요한 것은 클래스 속성, 데코레이터, 비동기/대기 유형 등 특정 항목을 사용하는 경우뿐입니다.

babel-eslint가 없는 react+jsx+es6의 .eslintrc 설정 예:

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

자세한 내용은 eslint-plugin-react 지침을 참조하십시오.

언급URL : https://stackoverflow.com/questions/17248504/getting-facebooks-react-js-library-jsx-syntax-to-play-nicely-with-jslint