CODEWITHSUNDEEP
reactjseslintbabeljseslint-config-airbnb
Shamnad P S
Shamnad P S

Reputation: 1173

how to exclude css files from eslint parser in React

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"] }],
    },

};

Upvotes: 17

Views: 29520

Answers (2)

btmills
btmills

Reputation: 4542

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.

Upvotes: 17

Todd
Todd

Reputation: 5454

.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

Upvotes: 18

Related Questions