Inställningar i vscode med EditorConfig

Om EditoConfig

EditorConfig är en konfigurationsmöjlighet för din texteditor där du kan göra inställningar per programmingsspråk så att texteditorn tar hänsyn till filens ändelse för att visa koden på olika sätt i din texteditor. Texteditorn vscode har stöd för EditorConfig. Du kan läsa mer om EditorConfig på deras webbplats.

Skapa en egen .editorconfig

Nu skall vi skapa en egen konfigurationsfil .editorconfig som passar denna kursen. Vi skall placera filen i kursrepot och lägga till den som en del i repot med gits kommandon för add, commit. Därefter gör vi push så att alla ändringar hamnar på GitHub.

Öppna vscode från nuvarande katalog

Du har din terminal öppen och du står i kursrepo. Börja med att öppna vscode från rooten av ditt kursrepo, det är punkten som anger vilken katalog som används och punkten refererar till nuvarande katalog.

code .

Image description — Bild: Öppna vscode via terminal med nuvarande katalog som arbetskatalog.

Det kan vara så att du får upp en fråga om du litar på filerna som fills i katalogen. Det är helt okej att svara ja på den frågan.

När du öppnat vscode så öppnar du även en terminal via menyvalet “Terminal -> New Terminal”.

Skapa filen .editorconfig

Skapa nu filen .editorconfig med hjälp av vscode.

Du kan antingen högerklicka på musknappen i filväljarträdet och välja “New File…” och skriva in filens namn.

Eller så använder du terminalen och skriver följande kommando för att skapa en ny fil.

# Create a new file
touch .editorconfig

Blir det fel så tar du bort filen och försöker igen.

Öppna nu den tomma filen editorconfig i vscode.

Det kan se ut så här.

Innehåll i filen .editorconfig

Använd följande innehåll som en bas i kursen. Konfigurationen gör bland annat så att du använder 2 mellanslag varje gång du gör en tab och det gäller i filer som slutar på till exempel .html. .css och .js.

# EditorConfig is awesome: https://editorconfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8

# Indentation override for all JS under lib directory
[*.{js,json,yaml,yml,css,html}]
indent_style = space
indent_size = 2

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

[{Taskfile.yml}]
indent_style = space
indent_size = 4

Ta innehållet och kopiera till vscode och spara filen.

Starta nu om vscode för att aktivera inställningarna. Du kan antingen stänga fönstret och öppna det igen via terminalen, ellesr så trycker du ctrl shift p (på Mac är det cmd shift p) och letar fram “Reload Window” och trycker enter.

Nu är EditorConfig aktivt i ditt kursrepo. Men glöm inte att du alltid måste öppna vscode från kursrepots översta katalog, den så kallade rooten av kursrepot.