Eslint: Difference between revisions

From Bitpost wiki
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
==== Intro ====
==== Intro ====
eslint is a Javascript linter and format-enforcer.  Love it or die.  I'm following Google's rules, with allowance for longer lines.  My job uses a very strict set of rules.
eslint is a Javascript linter and format-enforcer.  Love it or die.  I'm following Google's rules, with allowance for longer lines.  My job uses a very strict set of rules.
 
==== Installation ====
* Installation
Do NOT USE APT, it is available and seems to work but this is a node module.  Don't be stupid, use npm.  Note the mind-bogglingly-insane number of dependencies.  Node world, you scare me...
Do NOT USE APT, it is available and seems to work but this is a node module.  Don't be stupid, use npm.  Note the mind-bogglingly-insane number of dependencies.  Node world, you scare me...
* Install eslint node module
# From anywhere...
  npm install -g eslint
  npm install -g eslint
* Configuration
# Then from your project...
If you have an existing .eslintrc.js that works well in another project, JUST COPY IT to the root of the new vscode folder-based project. Otherwise, this will step you through it. Use the google format as a baseline:
  npm install --save-dev eslint-config-google
cd myproject
* Configure eslint (see below)
  eslint --init
* Install the eslint vscode extension.
* vscode integration
** Get the eslint extension
** Get the eslint extension
** Restart vscode and open a project with JS files.  Should be all you need.
** Restart vscode and open a project with JS files.
** An eslint dialog should pop up, click Allow.  Should be all you need.
 
===== Custom formatting =====
First do [https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code Per-project setup].
 
Then you can edit this in your project:
.eslintrc.json
 
==== Configuration ====
If you have an existing .eslintrc.js that works well in another project, JUST COPY IT to the root of the new vscode folder-based project.  Here's a good example:
module.exports = {
  'env': {
    'browser': true,
    'es2020': true,
  },
  // this is insane: 'extends': ['eslint:recommended', 'google'],
  'extends': ['google'],
  'parserOptions': {
    'ecmaVersion': 11,
    'sourceType': 'module',
  },
  'rules': {
    // MDM they don't call me [Michael 4k] for nothing.  I have to save SOME lint dignity.  Is this too much to ask?
    'max-len': [1, {'code': 120}],
  },
};
Otherwise, use one of these to step you through it.  Use the google format as a baseline:
* Run the vscode command EsLint: Create EsLint configuration
* Run the [eslint --init] command from the root of your project
 
==== eslint rules ====
eslint rules are generally ridiculously aggressive, truly for the OCD.  But you get used to it, for better or worse.  There are some pretty stupid ones, eg:
* [https://eslint.org/docs/rules/no-mixed-operators No mixed operators]!  Durrr... learn to program.
* No trailing spaces, even in comments
* String literals must use single quotes; JSX strings must use double quotes.
I'm not even sure which rule is causing some of those restrictions.  It gets complicated.  So don't go too crazy.

Latest revision as of 17:53, 29 December 2023

Intro

eslint is a Javascript linter and format-enforcer. Love it or die. I'm following Google's rules, with allowance for longer lines. My job uses a very strict set of rules.

Installation

Do NOT USE APT, it is available and seems to work but this is a node module. Don't be stupid, use npm. Note the mind-bogglingly-insane number of dependencies. Node world, you scare me...

  • Install eslint node module
# From anywhere...
npm install -g eslint
# Then from your project...
npm install --save-dev eslint-config-google
  • Configure eslint (see below)
  • Install the eslint vscode extension.
    • Get the eslint extension
    • Restart vscode and open a project with JS files.
    • An eslint dialog should pop up, click Allow. Should be all you need.
Custom formatting

First do Per-project setup.

Then you can edit this in your project:

.eslintrc.json

Configuration

If you have an existing .eslintrc.js that works well in another project, JUST COPY IT to the root of the new vscode folder-based project. Here's a good example:

module.exports = {
  'env': {
    'browser': true,
    'es2020': true,
  },
  // this is insane: 'extends': ['eslint:recommended', 'google'],
  'extends': ['google'],
  'parserOptions': {
    'ecmaVersion': 11,
    'sourceType': 'module',
  },
  'rules': {
    // MDM they don't call me [Michael 4k] for nothing.  I have to save SOME lint dignity.  Is this too much to ask?
    'max-len': [1, {'code': 120}],
  },
};

Otherwise, use one of these to step you through it. Use the google format as a baseline:

  • Run the vscode command EsLint: Create EsLint configuration
  • Run the [eslint --init] command from the root of your project

eslint rules

eslint rules are generally ridiculously aggressive, truly for the OCD. But you get used to it, for better or worse. There are some pretty stupid ones, eg:

  • No mixed operators! Durrr... learn to program.
  • No trailing spaces, even in comments
  • String literals must use single quotes; JSX strings must use double quotes.

I'm not even sure which rule is causing some of those restrictions. It gets complicated. So don't go too crazy.