如何使用 nodejs express 应用程序配置 eslint

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 ?

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

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

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();
};

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.

Answer 5

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

npm install -g eslint