Difference between revisions of "User:Saul/eslint"
From Organic Design wiki
m |
m (Update ruleset and packages.) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
Linting is a way to ensure your code follows convention.<br> | Linting is a way to ensure your code follows convention.<br> | ||
| − | |||
The linting config file is stored as ".eslintrc.js"<br> | The linting config file is stored as ".eslintrc.js"<br> | ||
| − | |||
<source lang="bash"> | <source lang="bash"> | ||
| − | npm i - | + | npm i --save-dev eslint |
| + | |||
| + | # If using Vue | ||
| + | npm i --save-dev eslint-plugin-html | ||
| + | |||
| + | # If using TypeScript | ||
| + | npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser | ||
</source> | </source> | ||
Here is the rule set I like to use: | Here is the rule set I like to use: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
module.exports = { | module.exports = { | ||
| − | + | // If using typescript: | |
| − | parser: " | + | //parser: "@typescript-eslint/parser", |
| + | |||
parserOptions: { | parserOptions: { | ||
| − | + | ecmaVersion: "latest" | |
}, | }, | ||
env: { | env: { | ||
| + | // For nodejs | ||
| + | commonjs: true, | ||
| + | es2021: true, | ||
| + | node: true | ||
| + | |||
| + | // For browser: | ||
browser: true, | browser: true, | ||
}, | }, | ||
| − | + | extends: "eslint:recommended", | |
| − | extends: " | ||
// required to lint *.vue files | // required to lint *.vue files | ||
| − | plugins: [ | + | // plugins: [ "html" ], |
| − | |||
| − | |||
rules: { | rules: { | ||
| + | curly: [1, "all"], | ||
// disallow single quotes | // disallow single quotes | ||
| − | quotes: [ | + | quotes: [1, "double", { allowTemplateLiterals: true }], |
// force semi-colons | // force semi-colons | ||
| − | semi: | + | semi: 1, |
// allow tabs | // allow tabs | ||
| − | no-tabs: [0], | + | "no-tabs": [0], |
// use tab indentation | // use tab indentation | ||
| − | indent: [" | + | indent: [1, "tab", { |
| + | SwitchCase: 1 | ||
| + | }], | ||
| + | // prevent commar dangles | ||
| + | "comma-dangle": [1, "never"], | ||
// allow paren-less arrow functions | // allow paren-less arrow functions | ||
| − | arrow-parens: 0, | + | "arrow-parens": 0, |
// allow async-await | // allow async-await | ||
| − | generator-star-spacing: 0, | + | "generator-star-spacing": 0, |
| + | "no-unused-vars": [1, { args: "after-used", vars: "local" }], | ||
| + | "no-constant-condition": 0, | ||
// allow debugger during development | // allow debugger during development | ||
| − | no-debugger: process.env.NODE_ENV === "production" ? 2 : 0 | + | "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0 |
} | } | ||
}; | }; | ||
</source> | </source> | ||
Latest revision as of 02:40, 26 August 2022
Linting is a way to ensure your code follows convention.
The linting config file is stored as ".eslintrc.js"
npm i --save-dev eslint
# If using Vue
npm i --save-dev eslint-plugin-html
# If using TypeScript
npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parserHere is the rule set I like to use:
module.exports = {
// If using typescript:
//parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest"
},
env: {
// For nodejs
commonjs: true,
es2021: true,
node: true
// For browser:
browser: true,
},
extends: "eslint:recommended",
// required to lint *.vue files
// plugins: [ "html" ],
rules: {
curly: [1, "all"],
// disallow single quotes
quotes: [1, "double", { allowTemplateLiterals: true }],
// force semi-colons
semi: 1,
// allow tabs
"no-tabs": [0],
// use tab indentation
indent: [1, "tab", {
SwitchCase: 1
}],
// prevent commar dangles
"comma-dangle": [1, "never"],
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
"no-unused-vars": [1, { args: "after-used", vars: "local" }],
"no-constant-condition": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === "production" ? 2 : 0
}
};
