Home-theater-designers
Det är viktigt att skriva ren och läsbar kod, oavsett om du arbetar ensam eller med ett team av utvecklare. Även om många faktorer bidrar till kodläsbarhet, är en av de viktigaste konsekvent kodformatering.
Men här är problemet: manuell kodformatering kan vara en absolut smärta och mycket benägen för fel. Verktyg som Prettier gör formatering av HTML, CSS, JavaScript och andra språk så mycket enklare. Upptäck hur du installerar och använder Prettier-tillägget för kodformatering, samt några avancerade konfigurationsinställningar.
MAKEUSE AV DAGENS VIDEO SCROLL FÖR ATT FORTSÄTTA MED INNEHÅLL
Installerar Prettier
Innan du fortsätter, se till att du har Node.js installerat på din dator. Du kan installera den senaste versionen från officiella Node.js nedladdningssida . Det följer med nodpakethanteraren (npm) inbyggd, som du kommer att använda för att hantera dina Node.js-paket.
Efter att ha bekräftat att Node.js är installerat lokalt, börja med att skapa en tom katalog för ditt projekt. Du kan namnge katalogen snyggare-demo .
Sedan, cd till den katalogen med hjälp av en kommandorad, kör sedan följande kommando för att initiera ett Node.js-projekt:
npm init -y
Detta kommando genererar en package.json-fil som innehåller standardinställningarna.
För att installera Prettier-tillägget, kör det här terminalkommandot:
hur man fixar en bild som är för mörk
npm i --save-dev prettier
De --save-dev flaggan installeras snyggare som ett utvecklingsberoende, vilket innebär att den bara används under utveckling.
Nu när du har det installerat kan du börja utforska hur Prettier fungerar genom att använda det på kommandoraden.
Använder Prettier via kommandoraden
Börja med att skapa en script.js fil och fyll i den med följande kod:
function sum(a, b) { return a + b }
const user = { name: "Kyle", age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3
}
För att formatera koden i denna script.js-fil via kommandoraden, kör följande kommando:
npx prettier --write script.js
Kommandot formaterar om JavaScript-koden i script.js till Prettiers standardstandard. Detta kommer att bli resultatet:
function sum(a, b) {
return a + b;
}
const user = {
name: "Kyle",
age: 27,
isProgrammer: true,
longKey: "Value",
moreData: 3,
};
Du kan också formatera HTML-uppmärkning från kommandoraden. Skapa en index.html fil i samma katalog som script.js . Klistra sedan in följande dåligt formaterade HTML i filen:
<header>
<div>
<img src="" alt="" class="weather-icon large">
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
För att formatera HTML, kör detta kommando:
npx prettier --write index.html
Detta kommando formaterar om HTML till Prettiers standardstandard, vilket resulterar i följande kod:
<header>
<div>
<img src="" alt="" class="weather-icon large" />
<div class="currentHeaderTemp"><span>21</span></div>
</div>
</header>
Du kan också använda --kolla upp flagga för att kontrollera om koden överensstämmer med Prettiers standarder. Följande exempel kontrollerar script.js :
npx prettier --check script.js
Detta är användbart om du vill ha en pre-commit hook för att säkerställa att folk använder Prettier och formaterar filerna innan de skjuts till Git. Detta fungerar bra när bidrar till öppen källkod .
Integrera snyggare i Visual Studio Code
Att använda Prettier via kommandoraden kan vara jobbigt. Istället för att köra ett kommando manuellt varje gång du vill formatera kod, kan du ställa in det så att det formateras automatiskt när du ändrar en fil. Lyckligtvis har Visual Studio Code (VS Code) ett sätt inbyggt för att göra detta åt dig.
Gå till Tillägg fliken i VS Code och sök efter Sötare . Klicka på Prettier - Kodformaterare , installera det och aktivera det sedan.
Gå till dina VS-kodinställningar genom att navigera till Arkiv > Inställningar > Inställningar . Sök efter i sökrutan Sötare . Du hittar massor av alternativ som hjälper dig att konfigurera Prettier-tillägget.
Vanligtvis klarar du dig med standardinställningarna. Det enda du kan tänka dig att ändra är semikolon (du kan ta bort dem om du vill). Annars är allt inställt på standard, men du kan ändra det hur du vill.
Se till att aktivera formatonsave alternativet så att koden i varje fil formateras automatiskt när du sparar den filen. För att aktivera det, sök bara efter formatonsave och kryssa i rutan.
Om du inte använder VSCode eller tillägget inte fungerar av någon anledning kan du det ladda ner onchange-biblioteket . Detta kör kommandot för att formatera koden när du ändrar filen.
Hur man ignorerar filer när man formaterar med Prettier
Om du skulle springa snyggare --skriva kommandot på hela din mapp, skulle det gå igenom varenda en av dina nodmoduler. Men du borde inte slösa tid på att formatera andras kod!
För att komma runt det här problemet, skapa en .prettierignore fil och inkludera termen node_modules i filen. Om du skulle köra --skriva kommandot på hela mappen, skulle det formatera om alla filer utom de i node_modules mapp.
Du kan också ignorera filer med ett specifikt tillägg. Om du till exempel vill ignorera alla HTML-filer lägger du bara till *.html till .prettierignore.
Hur man konfigurerar snyggare
Du kan konfigurera hur du vill att Prettier ska fungera med olika alternativ. Ett sätt är att lägga till en sötare nyckeln till din package.json fil. Värdet kommer att vara ett objekt som innehåller alla konfigurationsalternativ:
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
prettier: {
// options go here
}
}
Det andra alternativet (som vi rekommenderar) är att skapa en .söterrc fil. Den här filen låter dig göra alla möjliga anpassningar.
Låt oss säga att du inte gillar semikolon. Du kan ta bort dem genom att placera följande objekt i filen:
{
"semi": true,
"overrides": [
{
"files": ".ts",
"options": {
"semi": false
}
}
]
}
De åsidosätter egenskap låter dig definiera anpassade åsidosättningar för vissa filer eller filtillägg. I det här fallet säger vi att alla filer som slutar på .ts (det vill säga typskriptfiler) bör inte ha några semikolon.
Använder snyggare med ESLint
ESLint är ett lintverktyg för att upptäcka fel i JavaScript-kod samt formatera den. Om du använder Prettier, skulle du förmodligen inte vilja använda ESLint för formatering också. För att kunna använda dem tillsammans måste du installera och konfigurera eslint-config-prettier . Det här verktyget stänger av alla ESLint-konfigurationer för saker som Prettier redan hanterar.
Först måste du installera det:
npm i --save-dev eslint-config-prettier
Lägg sedan till den i utökad lista i .eslintrc fil (se till att det är det sista i listan):
{
"extends": [
"some-other-config-you-use",
"prettier"
],
"rules": {
"indent": "error"
}
}
Nu kommer ESLint att inaktivera alla regler som Prettier redan tar hand om för att förhindra konflikter.
Rensa upp din kodbas med Prettier och ESLint
Prettier är ett idealiskt verktyg för att rensa upp din kod och genomdriva konsekvent formatering i ett projekt. Att ställa in den att fungera med VS Code betyder att den alltid är inom räckhåll.
ESLint är ett måste-ha JavaScript-verktyg som går hand i hand med Prettier. Det ger massor av funktioner och anpassningsalternativ som går utöver grundläggande formatering. Lär dig hur du använder ESLint med JavaScript om du vill bli en mer produktiv utvecklare.