# @soleil-se/eslint-config ESLint konfiguration för Sitevision projekt som bygger på Airbnbs JavaScript styleguide. **ES2015+**\ **Legacy (ES5)**\ Om man stöter på ett fel man inte förstår kan man kolla i styleguiden eller söka på ESLints hemsida.\ ## Installera Installera konfigurationen, ESLint, Prettier, Svelte och de plugins som behövs genom att köra: ```sh npx @soleil-se/eslint-config@latest --setup ``` För att installera manuellt installera följande dependencies och skapa upp konfigurationsfiler enligt [nedan](#config). ```sh 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. ```sh 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 APItill `@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.\ ### Importera config **.eslintrc.cjs** ```js 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** ```js 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** ```text 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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) till Visual Studio Code. #### End of line Airbnb använder sig av LF för EOL. Ställs in under [settings](https://code.visualstudio.com/docs/getstarted/settings) i Visual Studio Code.\ Ändra `\r\n` till `\n`.\ Sen vill man även ha att en ny rad inkluderas i filerna. ```json "files.eol": "\n", "files.insertFinalNewline": true ``` #### Indentation Airbnb indenterar med två spaces. ```json "editor.tabSize": 2, "editor.insertSpaces": true ``` #### Autofix Man kan ställa in så enklare fel åtgärdas automatiskt under [settings](https://code.visualstudio.com/docs/getstarted/settings) i Visual Studio Code. ```json "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](https://code.visualstudio.com/docs/getstarted/settings). ```json "editor.rulers": [ 100 ] ``` #### Svelte För att få stöd för Svelte behöver man lägga in följande i [settings](https://code.visualstudio.com/docs/getstarted/settings). ```json "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: Exempelvis om en standalone WebApp har en egen konfiguration och plugins som läses in. ```json "eslint.workingDirectories": ["./standalone_apps/MyApp"] ``` Slår man på `{ "mode": "auto" }` försöker den automatiskt hitta rätt konfiguration. ```json "eslint.workingDirectories": [{ "mode": "auto" }] ``` #### Komplett config `Ctrl` + `Shift` + `P` och skriv settings och öppna `settings.json`. **settings.json** ```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.\ ## Svelte Installera [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) 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** ```js 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** ```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 `` före skripttaggen om det blir krockar och problem. **App.svelte** ```svelte

{foo}

``` ## 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.