Notebook of Linting

ESlint

Best option for Atom/Pulsar ¹ editor when linting right in NextJS project.

$ npm i -D eslint eslint-config-next eslint-plugin-react

// /.eslintrc file in root
{
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/prop-types": "off",
        "react/react-in-jsx-scope": "off",
        "no-unused-vars": "warn"
    }
}

Linting NodeJS Basic JavaScript formatted as ES 11

How to setup a configuration of undefined variables for a specific word that repeats

In parse-platform cloud function linting example, that ‘Parse’ word recognized as undefined when you work remote from the server src folder which is natural for cloud function development. So, in order to get rid of error notifications for all so-called undefined ‘Parse’ words, cloud function file must contain specific linting rule for that specific word to ignore.

/* global Parse */

If undefined variables must be marked as warning -which comes as ‘error’ as default, then we can use that file-based one-line rule definition at the beginning of the file:

/* eslint no-undef: "warn" */

Encapsulated disabling:

/* eslint-disable */
// Your code here
/* eslint-enable */

Disabling only specific rules, it’s the beginning of disabling, spans accross the file, as long as it doesn’t confront esline-enable command.

/* eslint-disable no-unused-vars */

Prettier

Default prettier config

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "strict",
  "proseWrap": "always",
  "printWidth": 80,
  "requirePragma": false,
  "tabWidth": 2,
  "useTabs": false,
  "embeddedLanguageFormatting": "auto"
}

Continue (SE24)

ViteJS basic template has its own eslint.js file in the root, but some editors requires to see .eslintrc file to be ready. Exemple below works without conflict.

{
  "env": {
    "browser": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react/jsx-runtime"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react", "react-hooks", "react-refresh"],
  "rules": {
    "react/jsx-no-target-blank": "off",
    "react-refresh/only-export-components": ["warn", { "allowConstantExport": true }]
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  }
}