JavaScript > Tools
ESLint
ESLint (https://eslint.org/) ist ein JavaScript Linting https://de.wikipedia.org/wiki/Lint_(Programmierwerkzeug) Werkzeug zur statischen Quellcode-Analyse.
Es basiert (mittlerweile) komplett auf Regeln, die durch Plugins hinzugefügt werden können. Regel-Verletzungen können unterschiedlich behandelt werden (ignorieren / warnung / error / reparieren).
Zur Vereinfachung gibt es auch Gruppen von voreingestellten Regeln - in ESLint leider "Extends" genannt.
Installiert mit
npm i -D eslint
Plugins
npm i -D eslint-plugin-react eslint-plugin-react-hooks
Parser
npm i -D babel-eslint
Beispiel:
.eslintrc.js (ohne Prettier)
module.exports = {
// Defines globals which are used within the environment
env: {
browser: true,
es6: true,
node: true, // Allow node globals (e. g. in dev packaging files)
jest: true, // Allow jest globals (in test files)
},
// Defines preset rules (which can be overwritten or extended in the rules section)
extends: [
"eslint:recommended",
"plugin:react/recommended",
],
// Adds additional set of rules
plugins: ["react", "react-hooks"],
// Uses the parser which understands the same as the babel transpiler
parser: "babel-eslint",
parserOptions: {
// ESLint expects valid <= JS 2018 code (not sure if this has an effect with babel-eslint parser)
ecmaVersion: 2018,
// Javascript code is separated into ECMAScript modules
sourceType: "module",
// ESLint expects additional features - here JSX code
ecmaFeatures: {
jsx: true,
},
},
// No additional globals (exept those defined via env section)
globals: {},
// Additional settings for react plugin
settings: {
react: {
//Automatically detect react version
version: "detect",
},
},
// Additional rules which will overwrite the preset rules of "extends" section
rules: {
// require destructuring from arrays and/or objects
"prefer-destructuring": [
2,
{
VariableDeclarator: {
array: true, // default: true
object: true, // default: true
},
AssignmentExpression: {
array: false, // default: true
object: false, // default: true
},
},
],
// warning for use of console
"no-console": "warn",
// error in case of == and != instead of === and !==
eqeqeq: "error",
// Curly for any block (even for single lines)
curly: "error",
// Error in case of hook rules not fulfilled
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
// Enforce curly brackets for props -> propname={"Hello"} instead of propname="Hello"
"react/jsx-curly-brace-presence": ["error", { props: "always", children: "ignore" }],
},
};