How to configure eslint with nodejs express application

Question

js application. I need to use eslint for this application. I am using https://www.npmjs.com/package/eslint-config-airbnb and using prettier plugin in VS Code editor.

.eslintrc

{
  "extends": "airbnb"
}

I see that VS Code is giving me lot of errors in complete project now after adding eslint plugin https://marketplace.visualstudio.comitems?itemName=dbaeumer.vscode-eslint and npm package.

Few errors

[eslint] Definition for rule 'jsx-a11y/href-no-hash' was not found (jsx-a11y/href-no-hash)
[eslint] Expected linebreaks to be 'LF' but found 'CRLF'. (linebreak-style)
[eslint] Unexpected unnamed function. (func-names)
[eslint] Missing space before function parentheses. (space-before-function-paren)
[eslint] Strings must use singlequote. (quotes)
[eslint] Unexpected function expression. (prefer-arrow-callback)
[eslint] Unexpected unnamed function 'bind'. (func-names)
[eslint] Missing space before function parentheses. (space-before-function-paren)

package.json

  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.5.1",
    "babel-core": "^6.9.0",
    "babel-eslint": "^7.2.3",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-stage-0": "6.5.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "nodemon": "^1.12.1"
  }

index.js

import request from "superagent";

module.exports = function(req, res, next) {
  const id = "abc";

  request
    .post(url)
    .send(`p1=v1`)
    .send(`p2=v2`)
    .end(function(error, response) {}.bind(this));
  next();
};

Same kind of errors in each JS files. Does anyone know how to resolve these ?

Sanferd

You might be interested by eslint-config-prettier module. – Oho

@Oho I have this { "extends": ["airbnb", "prettier"] } but i am facing same issue – Sanferd

Answer 1

1) Add the following modules to your devDependencies using:

npm install --save-dev eslint
npm install --save-dev eslint-config-airbnb-base
npm install --save-dev eslint-plugin-import

2) Add an eslintConfig section to your package.json:

"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
        "es6": true,
        "browser": true
    },
    "rules": {
        "brace-style": [
            "error",
            "stroustrup"
        ],
        "comma-dangle": [
            "error",
            "never"
        ],
        "no-unused-vars": [
            "warn"
        ],
        "no-var": [
            "off"
        ],
        "one-var": [
            "off"
        ]
    }
}

3) Visit eslint.org/docs/rules, search for the warnings you want to tweak and add them to the eslintConfig above.

4) Delete the .eslintrc file in the root of your project.

5) Restart your IDE

Imre

It has removed an errors, but how to check whether eslint is working or not. VS code is not showing any errors now – Sanferd

Make a change you know ESLint will complain about like removing a semi colon or add a variable without ‘var’. Also delete the .eslintrc file to avoid conflicts (post updated) – Imre

Yes. I restarted – Sanferd

Please check there are no errors in your package.json file such as a missing comma – Imre

I am getting this d:\abc\abc\server\node_modules\eslint-config-airbnb-base\rul‌​es\es6.js: Configuration for rule "prefer-destructuring" is invalid: Value "data["0"].VariableDeclarator" has additional properties. Value "data["0"].AssignmentExpression" has additional properties. Referenced from: airbnb-base Referenced from: d:\abc\abc\server\package.json – Sanferd

From the root of your project, try removing and re-adding your node modules... something has got mixed up somewhere – Imre

I did but no luck :( – Sanferd

Please check VSCode is up to date, along with all plugins – Imre

Is it helpful for express or fastify project? – Hejaz

@EDISONJ yes, I think it's helpful for all JS projects as it helps enforce some kind of coding standard - which should make things easier for teams – Imre

I'm not sure moving all eslint configuration directly to the package.json is a good standard... what is wrong with using .eslintrc ? What is your source/reference for suggesting this ? ESlint seem to say both are okay : eslint.org/docs/user-guide/configuring but from XP there are a number of plugins / converters (like tslint that is deprecated in favor of eslint in VS Code) that work using separate files. – Mobile

Answer 2

Install eslint package locally to your project.

$yarn add eslint --dev

Ideally one can generate configuration file .eslintrc through below command, unfortunately it installs wrong versions of peerDependencies resulting in weired linting errors.

$./node_modules/.bin/eslint --init

Easier way to fix the version of peerDependencies issue, use below command and install(I suggest you to install packages related to jsx and react though you may not doing any stuff related to React) corresponding version of the peerDependencies along with eslint-config-airbnb

$npm info "eslint-config-airbnb@latest" peerDependencies

Edit .eslintrc file with below content

{
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
  },
  "env": {
  }
}

*Note: Please edit eslintrc file depending on your coding rules, environment you follow. Refer developer-guide

Strade

Why do we need the react and jsx-a11y plugin for an app that has neither React nor use JSX? – Liggett

Answer 3

ESLint wrote messages what you need to do. Just read it.

Correct code with this rules should be following:

import request from 'superagent';

module.exports = (req, res, next) => {
  const id = 'abc';

  request
    .post(url)
    .send('p1=v1')
    .send('p2=v2')
    .end((error, response) => {
      // do something on end
    });
  next();
};

Mote

Answer 4

Other answers are close, hope this answer will help in a complete answer:

1:

File .eslintrc.js

module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: "eslint:recommended",
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  // parser: "babel-eslint",
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module",
  },
  // plugins: [],
  rules: {
    "no-console": "off", // "warn" // "off"
  },
  settings: {},
};

2:

File .eslintignore

node_modules/

3:

File package.json

{
  "scripts": {
    "lint": "eslint \"./**/*.js\" --quiet",
    "lintFull": "eslint \"./**/*.js\"",
    "lintFix": "eslint --fix './**/*.js'"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
  }
}

4:

npm i
npm run lint

That's all

----------------

But, additionally, if you want to make your own .eslintrc.js with custom settings like Typescript, etc. try the below:

1:

npm i eslint -g

2:

eslint --init

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Node
? What format do you want your config file to be in? JavaScript
    Successfully created .eslintrc.js file in C:\repo\nodeapp1

Hope that helps.

Graphite

Answer 5

If you are using atom, vs code... maybe the editor needs to install globally eslint.

npm install -g eslint

Dunfermline