how to exclude css files from eslint parser in React

Question

I need to exclude css files from the eslint parser.

Currently when I run eslint src/** this is checking all the files including css files. . Please find below my eslintrc file contents.

module.exports = {
    "parser": "babel-eslint",
    "extends": "airbnb",

    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "env" : {
      "browser": true
    }
    "rules": {
      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    },

};

Atmolysis

.eslintignore file to ignore styles would work nicely. maybe something like this: *.css or src/**/*.css. also, have you tried setting your eslint "root" to the folder of concern, that may simplify things? – Costumier

Thanks you. It works!. could you also specify how to remove jsx-a11y/href-no-hash valdiations from eslint – Atmolysis

my bad, "root" would actually be set to true, but only in the directory context where that is true, i.e. in "src/.eslintignore". see: eslint.org/docs/user-guide/… – Costumier

I just added *.css to the .eslintignore file – Atmolysis

sweet. I'd check out the eslint/jsx-a11y documentation for that second question... they're bound to have an example of exactly what you're looking for. – Costumier

Using src/** as the path will miss any .jsx files in subdirectories inside of src. You can use eslint --ext js,jsx src instead and won't have to exclude CSS files in the eslintignore. – Wino

Answer 1

.eslintignore file to ignore styles would work nicely. Inside, do something like this: *.css

Here's a good starting point with these techs, which I actually found while reading another, similar SO post

Costumier

Please include some contents of mentioned link, the links may be broken in futures times ;) – Exhibitioner

Answer 2

Use eslint --ext js,jsx src instead. This allows ESLint to do its own traversal of the src directory, including files with .js or .jsx extensions.

Using eslint src/** and ignoring src/**/*.css will correctly exclude .css files, but it will miss any .jsx files in subdirectories inside of src.

Why?

Given this as an example

src
├── a.css
├── b.js
└── c
    ├── d.css
    ├── e.js
    └── f.jsx

• eslint src/** expands to eslint src/a.css src/b.js src/c. ESLint checks src/a.css and src/b.js because they were explicitly passed, then does its own traversal of src/c and lints src/c/e.js. This includes even non-js files directly within src and completely misses .jsx files in subdirectories of src.
• eslint src tells ESLint to do its own traversal of src with the default .js extension, so it lints src/b.js and src/c/e.js but misses src/c/f.jsx.
• eslint --ext js,jsx src tells ESLint to do its own traversal of src, including .js and .jsx files, so it lints src/b.js, src/c/e.js, and src/c/f.jsx.

Wino

In what file to add this line eslint --ext js,jsx src – Luting