@soleil-se/eslint-config

ESLint konfiguration för Sitevision projekt som bygger på Airbnbs JavaScript styleguide.

ES2015+
https://github.com/airbnb/javascript

Legacy (ES5)
https://github.com/airbnb/javascript/tree/es5-deprecated/es5

Om man stöter på ett fel man inte förstår kan man kolla i styleguiden eller söka på ESLints hemsida.
https://eslint.org/docs/rules/

Installera

Installera konfigurationen, ESLint, Prettier, Svelte och de plugins som behövs genom att köra:

npx @soleil-se/eslint-config@latest --setup

För att installera manuellt installera följande dependencies och skapa upp konfigurationsfiler enligt nedan.

npm i @soleil-se/eslint-config@5 eslint@8 eslint-config-airbnb-base eslint-plugin-import eslint-plugin-svelte eslint-config-prettier --save-dev

Uppgradera

Version 4.x.x > 5.x.x

• Uppgradera @soleil-se/eslint-config till version 5.
• Avinstallera eslint-plugin-svelte3.
• Installera eslint-plugin-svelte.
• Installera eslint-config-prettier om det inte redan är installerat.

npm i @soleil-se/eslint-config@5 eslint-plugin-svelte eslint-config-prettier --save-dev && npm remove eslint-plugin-svelte3

Version 3.x.x > 4.x.x

• Om Vue används i projektet stanna på version 3, stödet för Vue plockas bort i denna version.
• Uppgradera @soleil-se/eslint-config till version 4.
• Om Svelte används i projektet installera eslint-config-prettier.
• Byt ut alla importer av konfigurationer:
  • @soleil-se/eslint-config/global > @soleil-se/eslint-config
  • @soleil-se/eslint-config/webapp > @soleil-se/eslint-config
  • @soleil-se/eslint-config/client > @soleil-se/eslint-config
  • @soleil-se/eslint-config/server-es6 > @soleil-se/eslint-config
  • @soleil-se/eslint-config/universal > @soleil-se/eslint-config
• Byt ut alla importer av legacy-konfigurationer:
  • @soleil-se/eslint-config/server-legacy > @soleil-se/eslint-config/legacy
  • @soleil-se/eslint-config/server > @soleil-se/eslint-config/legacy

Version 2.x.x > 3.x.x

• Uppgradera @soleil-se/eslint-config till version 3.
• Uppgradera eslint till version 8.
• Uppgradera eslint-config-airbnb-base till version 15.
• Ändra importer till Sitevisions API
  till @sitevision/api/(server|common|client)/NamnPåAPI.

Version 1.x.x > 2.x.x

• Uppgradera eslint till version 7.
• Installera alla dependencies enligt installationssteget.
• Om @soleil-se/eslint-config/vue används byt till @soleil-se/eslint-config/client.

Config

ESLint läser främst från .eslintrc.cjs filer i projektet.
https://eslint.org/docs/user-guide/configuring#using-configuration-files-1

Importera config

.eslintrc.cjs

module.exports = {
  extends: '@soleil-se/eslint-config',
};

Legacy config som används i en kontext med stöd för ES5 och delvis ES2015+.
Till exempel serverkod som ska laddas upp som den är till Sitevision utan kompilering.

.eslintrc.cjs

module.exports = {
  extends: '@soleil-se/eslint-config/legacy',
  root: true,
};

ESLint ignore

Lägg med en .eslintignore fil i roten för att slå av linting av filer i bland annat node_modules och dist.

.eslintignore

dist
node_modules
**/node_modules
svelte.config

Editors

Enklaste sättet att komma igång med ESLint är att installera det som extension i din editor.

Visual Studio Code

Installera ESLint till Visual Studio Code.

End of line

Airbnb använder sig av LF för EOL. Ställs in under settings i Visual Studio Code.
Ändra \r\n till \n.
Sen vill man även ha att en ny rad inkluderas i filerna.

"files.eol": "\n",
"files.insertFinalNewline": true

Indentation

Airbnb indenterar med två spaces.

"editor.tabSize": 2,
"editor.insertSpaces": true

Autofix

Man kan ställa in så enklare fel åtgärdas automatiskt under settings i Visual Studio Code.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Max length

Airbnb förespråkar en maxlängd på 100 tecken på en rad.
Man kan ställa in så man visar en linje i Visual Studio Code för att visualisera detta. Görs i settings.

"editor.rulers": [
  100
]

Svelte

För att få stöd för Svelte behöver man lägga in följande i settings.

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "svelte"
]

Konfig i underkatalog

Om man vill köra ESLint i en underkatalog som har en egen installation och konfiguration av eslint behöver man antingen lägga till katalogens sökväg i inställningen eslint.workingDirectories eller ändra till { "mode": "auto" }.
Läs mer här: https://github.com/microsoft/vscode-eslint#settings-options

Exempelvis om en standalone WebApp har en egen konfiguration och plugins som läses in.

"eslint.workingDirectories": ["./standalone_apps/MyApp"]

Slår man på { "mode": "auto" } försöker den automatiskt hitta rätt konfiguration.

"eslint.workingDirectories": [{ "mode": "auto" }]

Komplett config

Ctrl + Shift + P och skriv settings och öppna settings.json.

settings.json

"files.eol": "\n",
"files.insertFinalNewline": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit"
},
"editor.rulers": [
  100
],
"editor.formatOnSave": false,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "svelte",
],
"[svelte]": {
  "editor.formatOnSave": true
},
"eslint.workingDirectories": [{ "mode": "auto" }],

CLI

Om man vill köra ESLint i sin terminal.
https://eslint.org/docs/user-guide/command-line-interface

Svelte

Installera Svelte tillägget till Visual Studio Code.

Kodformatering

Formatering av kod i Svelte använder Prettier så man behöver lägga till insällningar för det så HTML kan formateras, dessvärre påverkar detta även JavaScript så några regler som man är van vid har fått stängas av så det inte krockar med Prettier. Skapa en fil som heter .prettierrc.js i roten av projektet.

.prettierrc.cjs

module.exports = require('@soleil-se/eslint-config/svelte.prettier');

För att formatera automatiskt behöver man lägga till följande i settings.json i Visual Studio Code.

settings.json

{
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
}

Man kan även stänga av formateringen av skript genom att lägga till kommentaren <!-- prettier-ignore --> före skripttaggen om det blir krockar och problem.

App.svelte

<!-- prettier-ignore -->
<script>
  const foo = 'bar';
</script>

<p>{foo}</p>

Git

Om man har problem med linebreaks i git kan man behöva göra följande:

1. Pusha upp / stasha alla förändringar.
2. Skapa en fil i roten av projektet med namnet .gitattributes.
3. Ange innehåll i filen: * text=auto eol=lf.
4. Kör: git rm --cached -r .
5. Kör: git reset --hard.
6. Pusha upp filen.

https://stackoverflow.com/questions/9976986/force-lf-eol-in-git-repo-and-working-copy/34810209#34810209