sinpro.devESLint
How we define code style using ESLint.
Plugins
Install:
npm i eslint-plugin-prettier -D
Add prettier on plugins section:
module.exports = {
plugins: ['@typescript-eslint', 'prettier'],
}
Base Rules
- Make accessibility and return type mandatory.
- Prohibit console output.
module.exports = {
rules: {
'prettier/prettier': 'error',
indent: ['error', 'tab', { SwitchCase: 1, ignoredNodes: ['ConditionalExpression'] }],
semi: ['error', 'never', { beforeStatementContinuationChars: 'never' }],
'no-unexpected-multiline': 'error',
'@typescript-eslint/explicit-member-accessibility': ['error'],
'@typescript-eslint/explicit-function-return-type': ['error'],
'no-var': 'error',
'no-console': ['error'],
},
}
typescript-eslint - explicit-member-accessibility >
typescript-eslint - explicit-function-return-type >
Padding line between statements
Insert blank lines where appropriate as needed.
This rule will also be applied to the format.
module.exports = {
rules: {
// 'lines-between-class-members': ['warn', 'always', { exceptAfterSingleLine: true }],
'@typescript-eslint/lines-between-class-members': [
'error',
'always',
{ exceptAfterSingleLine: true, exceptAfterOverload: true },
],
'padding-line-between-statements': [
'error',
{
blankLine: 'always',
prev: '*',
next: ['export', 'const', 'let', 'return', 'multiline-block-like', 'multiline-expression'],
},
{ blankLine: 'any', prev: 'export', next: 'export' },
{ blankLine: 'any', prev: 'const', next: 'const' },
{ blankLine: 'any', prev: 'let', next: 'let' },
],
},
}
Naming conventions
Enforce naming conventions for everything across a codebase.
- Define variable names, argument names, and function names with snake_case.
- Prefix private variables with an underscore.
module.exports = {
rules: {
'@typescript-eslint/naming-convention': [
'error',
{
selector: 'typeParameter',
format: ['UPPER_CASE'],
},
{
selector: ['class', 'interface', 'typeAlias'],
format: ['PascalCase'],
},
{
selector: ['method', 'function'],
modifiers: ['private'],
format: ['snake_case'],
leadingUnderscore: 'require',
},
{
selector: ['method', 'function'],
modifiers: ['protected'],
format: ['snake_case'],
leadingUnderscore: 'require',
},
{
selector: ['method', 'function'],
format: ['snake_case'],
// format: ['snake_case', 'camelCase'],
},
{
selector: [
'property',
'accessor',
'parameter',
'parameterProperty',
'variable',
'enumMember',
],
modifiers: ['private'],
format: ['snake_case'],
leadingUnderscore: 'require',
},
{
selector: [
'property',
'accessor',
'parameter',
'parameterProperty',
'variable',
'enumMember',
],
modifiers: ['protected'],
format: ['snake_case'],
leadingUnderscore: 'require',
},
{
selector: ['accessor', 'parameter', 'parameterProperty', 'enumMember'],
format: ['snake_case'],
},
{
selector: ['property'],
format: ['snake_case', 'camelCase'],
},
{
selector: ['variable'],
format: ['snake_case', 'UPPER_CASE'],
},
],
},
}
Overrides
Disable some rules for .cjs files.
module.exports = {
overrides: [
{
files: '*.cjs',
rules: {
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/naming-convention': 'off',
},
},
],
}
Using ESLint with Svelte
{
"eslint.probe": [
...
"svelte"
],
"eslint.validate": ["svelte"],
}
Formatting
We have changed our policy to format with ESLint.
- Enable format on save and paste events.
- Use ESLint to format TypeScript, JavaScript, HTML, and Svelte files.
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"eslint.format.enable": true,
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[html]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[svelte]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[css]": {
"editor.defaultFormatter": "vscode.css-language-features"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
Change Scripts
Change the lint and format scripts.
{
"scripts": {
"lint": "eslint .",
"format": "eslint . --fix",
}
}
Missing return type on function in the HTML part of Svelte
In the HTML part of Svelte, if “Missing return type on function” is displayed, add an eslint-disable line at the bottom of the script block.
<script lang="ts">
...
/* eslint-disable @typescript-eslint/explicit-function-return-type */
</script>
<button on:click={() => on_click_button(text)} />