Setting ESLint on Meteor for React Development

meteor npm install --save-dev babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-meteor eslint-plugin-react eslint-plugin-jsx-a11y eslint-import-resolver-meteor eslint
./node_modules/.bin/eslint --quiet MyComponent.js
  3:1  error  Component should be written as a pure function  react/prefer-stateless-function
6:7 error JSX not allowed in files with extension '.js' react/jsx-filename-extension
✖ 2 problems (2 errors, 0 warnings)
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}
{
"env": {
"browser": true,
"es6": true
},
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:meteor/recommended"
],
"parserOptions": {
"allowImportExportEverywhere": true
},
"plugins": [
"meteor"
],
"settings": {
"import/resolver": "meteor"
},
"rules": {
"indent": [
"error",
2
],
"quotes": [
"error",
"single",
// To allow Template Literals inside Component props.
// ex. <Component width={`50%`}/>
//
{ "allowTemplateLiterals": true }
],
"react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
// To allow absolute path imports in Meteor
"import/no-absolute-path": [
"off"
],
// To resolve https://github.com/clayne11/eslint-import-resolver-meteor/issues/17
"import/extensions": [
"off",
"never"
],
// Work around until https://github.com/benmosher/eslint-plugin-import/issues/479 is resolved
"import/no-extraneous-dependencies": [
"off"
],
// To allow `_id` access when retrieving Mongo documents
"no-underscore-dangle": [
"off"
]
}
}

--

--

--

Christian. Husband and a Dad. Software Engineer. http://jzarzoso.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Janzen Zarzoso

Janzen Zarzoso

Christian. Husband and a Dad. Software Engineer. http://jzarzoso.com

More from Medium

How to test React Apps?

Simple Redux with React Context (Part 1 — what is React Context?)

Utilizing Typescript In React

React Functional Components Hooks