grunt-jsxhint и jsxhint не действуют одинаково

Question

Когда я использую npm install -g jsxhint Я могу использовать его, чтобы скрыть мой код JSX, например, так:

Но когда я пытаюсь использовать grunt-jsxhint чтобы настроить команду lint, она терпит неудачу:

Мой Gruntfile очень прост:

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-jsxhint');

  /* Project configuration */
  grunt.initConfig({
    options: {
      jshintrc: '.jshintrc',
      ignores: [],
      additionalSuffixes: ['.js', '.ios.js']
    },
    jshint: {
      all: ['./app/index.ios.js']
    }
  });

  /* Test Tasks */
  grunt.registerTask('test', ['jshint']);
};

Почему они дают разные результаты?

• https://www.npmjs.com/package/jsxhint
• https://www.npmjs.com/package/grunt-jsxhint

Answer 1

JsxHint и JSHint не являются лучшими инструментами для раскрашивания JSX. JSHint не поддерживает JSX, и все, что делает JsxHint - это преобразовывает JSX, а затем запускает JSHint для преобразованного кода. Я использовал (и очень рекомендую) ESLint с плагином React. Это лучше, так как Eslint может анализировать любой вкус Javascript с помощью пользовательских анализаторов (например, esprima-fb)

Образец .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"
    }
}

Answer 2

Я понял, что случилось с моим Gruntfile.

Вам нужно загрузить задачу в: grunt.loadNpmTasks('grunt-jsxhint');

После grunt.initConfig({}) был установлен.

Это будет выглядеть так:

module.exports = function(grunt) {

  /* Project configuration */
  grunt.initConfig({
    options: {
      jshintrc: '.jshintrc',
      ignores: [],
      additionalSuffixes: ['.js', '.ios.js']
    },
    jshint: {
      all: ['./app/index.ios.js']
    }
  });

  grunt.loadNpmTasks('grunt-jsxhint');

  /* Test Tasks */
  grunt.registerTask('test', ['jshint']);
};