VSCode: ESLint, Stylelint ve Prettier'ı sorunsuz kullanmak

Kod yazan her insanın kendine özgü bir yazım stili var. Bazı diller farklılıkların önüne geçebilmek için kendi style guidelarına göre formatterlara sahipler. Go(gofmt) ve ReasonML(refmt) bunlara örnek gösterilebilir. Javascript dilinde bu tarz bir çözüm dil ile birlikte gelmiyor, bunun için çeşitli yardımcı paketler kullanmamız gerekmekte. Prettier bu konuda en popüler çözüm olarak göze çarpıyor. Ancak daha önce bu konuda uğraşanlar da anlayacaktır ki projede hem linter hem de formatterı aynı anda kullanmak istersek bazı sorunlar ortaya çıkabiliyor. Örneğin linterın kuralları ile formatterın kuralları birbirini ezip kodu okunamaz hale getirebiliyor. VSCode içerisinde bu paketlerin uyumlu çalışmasını sağlamak için yapmamız gereken birkaç şey var.

yarn add --dev prettier-eslint prettier-eslint-cli prettier-stylelint

VSCode içerisinde entegrasyon için bu 3 aracın eklentisini yüklememiz gerek. Eklentiler;

• Prettier
• ESLint
• StyleLint

Ardından projemiz içerisinde .vscode/settings.json içerisine şu ayarları eklemeliyiz.

// .vscode/settings.json
{
  "prettier.eslintIntegration": true,
  "prettier.stylelintIntegration": true,
  "eslint.autoFixOnSave": false,
  "editor.formatOnSave": true
}

.eslintrc.json dosyasına prettierın ruleslarını kullanacağımızı belirtiyoruz.

// .eslintrc.json
{
  "parser": "babel-eslint",
  "extends": ["prettier", "react-app", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"],
    "jsx-a11y/href-no-hash": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }
}

package.json içersine bu scriptleri ekledikten sonra işlem tamamdır.

// package.json
{
  "scripts": {
    "fix-code": "prettier-eslint --write 'source/**/*.{js,jsx}' ",
    "fix-styles": "prettier-stylelint --write 'source/**/*.{css,scss}' "
  }
}

Artık projede kaç kişi çalışıyorsa çalışın, codebase tek elden çıkmış şekilde olacak. Kod okunabilirliği açısından önemli detaylardan birini halletmiş olduk.

Dilerseniz husky tarzı pre-commit araçları kullanarak her commit atıldığında otomatik tüm codebasei formatlayabilirsiniz.

// .lintstagedrc
{
  "*.js": ["yarn fix-code", "git add"],
  "*.scss": ["yarn fix-styles", "git add"]
}