React-ის ლინტერი & კოდის ფორმატერი - ESLint & Prettier

ზოგადად პროექტის სქოუფში, თიმში, ორგანიზაციაში კოდის დისციპლინის ჩამოყალიბებას უაღრესად დიდი მნიშვნელობა აქვს.

ყველა ადამიანი არის უნიკალური და აქვს საკუთარი შეხედულებები. ზოგს მოსწონს ყვითელი, ზოგს შეიძლება ვარდისფერი მოსწონდეს. შენ შეიძლება ცვლადის სახელები camelCase სტილით მოგწონს, ხოლო სხვას snake_case-ით მოსწონდეს.

რამდენადაც საინტერესო და უაღრესად მნიშვნელოვანია უნიკალური შეხედულებების ქონა, ზოგ შემთხვევაში იმდენადვე შეიძლება სირთულეები გამოიწვიოს.

მაგალითისთვის მე თუ გუნდში პროექტზე ვმუშაობ და ვწერ A სტილით კოდს და ჩემი კოლეგა წერს რადიკალურად განსხვავებული B სტილით - ეს უკვე არის პრობლემა და იწვევს როგორც ახლო მომავალში გართულებებს, ასევე გრძელვადიანი სახითაც.

ამას გარდა, სუფთა ხელებით კოდის სტილის შენარჩუნებას პროექტში უაღრესად დიდი ძალისხმევა სჭირდება. ამიტომაც შეიქმნა ისეთი თულები როგორიცაა ESLint, PHP CS Fixer, Prettier, Pylint და ა.შ.

ეს ხელსაწყოები უზრუნველყოფენ, რომ კოდის სტილი შენარჩულებული იყოს მთელს ქოუდბეისზე.

React-ისთვის რა ხელსაწყოები უნდა გამოვიყენოთ?

React js-ის პროექტებში უმეტესად იყენებენ 2 ხელსაწყოს კომბოს ESLint და Prettier

რა არის ESLint?

ESLint წარმოადგენს Javascript-ის ლინტერს. ზოგადად ლინტერს აქვს 2 მოვალეობა:

• კოდის ფორმატირება

• და ბაგების პოვნა

მაგალითად ESLint-ს შეგვიძლია ვუთხრათ, რომ ჩვენს ჯავასკრიპტის ბრძანებებს ბოლოში აუცილებლად უნდა წერტილმძიმე ან არ უნდა და შესაბამისად დაგვიფორმატებს კოდს.

მაგრამ ESLint-ს ასევე შეუძლია ბაგებიც იპოვოს ჩვენ კოდში, მაგალითისთვის თუ React-ის ჰუკების გამოყენების წესებს დავარღვევთ, მიხვდება და შესაბამის Feedback-ს მოგვცემს და ა.შ.

რა არის Prettier?

ESLint-ისგან განსხვავებით Prettier-ს მხოლოდ ერთი მოვალეობა - კოდის ფორმატირება აქვს - და მაგ საქმეში ბადალი არ ყავს.

Prettier არის "opinionated" ხელსაწყო, რაც იმას ნიშნავს, რომ მისი კონფიგურაცია არის ძალიან ლიმიტირებული და აქვს ერთი კონკრეტული მიდგომა თუ როგორ უნდა დააფორმატოს კოდი.

რეალურად ეს არის Prettier-ის ფილოსოფია - ყველა ქოუდბეისში ერთი სტილის კოდი ეწეროს.

ამის მიუხედავად, მაინც გვაქვს საშუალება Prettier-ს გავუსეტოთ კონფიგურაცია, მაგრამ რეკომენდირებულია, რომ მივენდოთ Prettier-ს, რომ აკეთოს თავის საქმე.

და მაინც რა საჭიროა ორი ხელსაწყო?

React-ში და ზოგადად ჯავასკრიპტში გამოიყენება ESLint-ის და Prettier-ის კომბო ერთდროულად:

ESlint ჭკვიანი ლინტერი, ბაგების საპოვნელად და კოდის ხარისხის გასაუმჯობესებლად, ხოლო Prettier, როგორც კოდის არანორმალურად მძლავრი ფორმატერი.

ამ ორის კომბო დეველოპერისთვის მძლავრ იარაღს წარმოადგენს 🥷

ESLint-ის და Prettier-ის კონფიგურაცია React-ის პროექტში

იმისათვის, რომ ESLint-მა და Prettier-მა ჰარმონიულად იმუშაონ ერთდროულად საჭიროა ამ თულების ოდნავ დაკონფიგურირება

პირველ რიგში დავაინსტალიროთ ESLint

npm install eslint --save-dev

შემდგომ დავაინსტალიროთ Prettier

npm install --save-dev --save-exact prettier

დაგვჭირდება, რომ ESLint-ს და Prettier-ს კონფიგურაციების ფაილები შევუქმნათ. პროექტის root ფოლდერში შევქმნათ 2 ფაილი: .eslintrc.json და .prettierrc.json

create react app-ის პროექტი

როდესაც რეაქტის აპლიკაციას შევქმნით სტანდარტულად package.json-ში ჩაშენებული eslint-ის კონფიგურაცია მოყვება. ავიღოთ არსებული სტანდარტული კონფიგურაცია package.json-დან და ჩავსვათ .eslint.json-ში, ხოლო package.json-ში წავშალოთ eslint-ის კონფიგურაცია.

სტანდარტული რეაქტის eslint კონფიგურაცია package.json-ში

არ დაგავიწყდეთ რომ react-app/jest-ი ამოშალოთ თუ jest-ს პროექტში არ იყენებთ

vite-ის პროექტი

vite-ს create react app-ისგან განსხვავებით ჩაშენებულად არ მოყვება eslint-ის წესები ასერომ ისნი ხელით უნდა ჩავამატოთ შემდეგი ბრძანებით:

npm install --save-dev eslint-config-react-app eslint

და შემდეგ ქვემოთ მოცემული სურათში როგორც არის ნაჩვენები ის კონფიგურაცია გაწერეთ .eslintrc.json-ში

თქვენი .eslintrc.json-ი ასე უნდა გამოიყურებოდეს

რეალურად React-ს აქვს უკვე რეკომენდირებული eslint-ის წესების კრებული, რომლებიც მოყვება ბიბლიოთეკას და არის რეკომენდირებული ამ წესებს არ გადავუხვიოთ.

ახლა კი .prettierrc.json -ში ჩავწეროთ შემდეგი მინიმალური კონფიგურაცია:

მოკლედ, eslint და prettier ორივე ცალცალკე გამართული გვაქვს უკვე, მაგრამ ეს არ კმარა, რადგანაც prettier-ის ზოგი ფორმატირების წესები შეიძლება კონფლიქტში მოვიდეს eslint-თან, ამისათვის გვჭირდება, რომ დავაინსტალიროთ eslint-config-prettier ფექიჯი, რომელიც გათიშავს eslint-დან იმ ფორმატირების წესებს, რომელიც შესაძლოა კონფლიქტში მოვიდეს prettier-თან.

გავუშვათ შემდეგი ბრძანება:

npm install --save-dev eslint-config-prettier

ბიბლიოთეკის დაინსტალირების შემდგომ დაგვჭირდება, რომ ჩვენს eslint-ის კონფიგურაციის extends მასივში ჩავამატოთ prettier რომ კონფლიქტური eslint-ის წესები გათიშოს:

ასევე კარგი იქნება თუ ერთი ბრძანებით შეგვეძლება ESLint-ის და Prettier-ის გაშვება. ორივე ხელსაწყოს აქვს თავისი CLI tool. რეკომენდირებული გზა არის, რომ prettier-ი eslint-ზე მიებას და მაგალითად: npx eslint --fix filename.jsx command-ის გაშვების შემდეგ ჯერ eslint-ი გაეშვება filename.jsx-ზე და შემდგომ prettier-ი.

ამისათვის საჭიროა კიდევ ერთი ბიბლიოთეკის დაინსტალირება, გაუშვით ბრძანება:

npm install --save-dev eslint-plugin-prettier

შემდგომ კი საჭიროა დავააფდეითოთ .eslintrc.json:

ახლა eslint CLI-ს გაშვების შემდგომ ავტომატურად გაეშვება prettier

Typescript-ის პროექტი

თუ Typescript-ს ვიყენებთ პროექტში ბოლო წესი ცოტათი უნდა შევცვალოთ:

ამას თუ არ ვიზამთ ტიპებშიც გაგვიწითლებს გამოიყენებელ ცვლადებს რაც მომაბეზრებელი და არასაჭიროა, მაგრამ მარტო ამ წესით ის არ იმუშავებს Typescript-თან ერთად, ამითვის ჩვენ უნდა დავაყენოთ ორი package-ი: npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

ESlint & Prettier VS Code-ში

იმისათვის, რომ მაქსიმალურად კარგი Developer Experience გვქონდეს ამ ხელსაწყოებისაგან კარგი იქნება თუ ჩავაინტეგრირებთ ESlint-ს და Prettier-ს VS Code-ში.

ეს არის ძალიან მარტივი პროცესი. უბრალოდ მოგვიწევს VS Code-ის settings.json-ში პატარა კონფიგურაციის ჩამატება:

და ESLint-ის პლაგინის დაყენება:

ახლა ფაილის შენახვისას ESLint და Prettier ავტომატურად გაეშვება VSCode-ში და ასევე შესაბამისი Feedback-იც გვექნება ედიტორში.

ESLint & Prettier PHPStorm-ში და WebStorm-ში

PHPStorm-სა და WebStorm-ს ESLint-ის პლაგინი სტანდარტულად მოყვება და Prettier-ის და ESLint-ის კონფიგურაციასაც აღიქვამენ.

ჩვენ უბრალოდ Shortcut უნდა გავუწეროთ ESLint-ის ფორმატინგს და შემდეგ შევძლებთ მარტივად დავაფორმატოთ ჩვენი კოდი

შეჯამება

ESLint და Prettier დეველოპერი tool-ების არსენალში ეფექტურ საშუალებას წარმოადგენს კოდის ხარისხის და სტილის შესანარჩუნებლად.

იმისათვის, რომ გავმართოთ ESLint და Prettier გვჭირდება შემდეგი ბიბლიოთეკები:

• eslint

• prettier

• eslint-config-prettier(ბიბლიოთეკა, რომელიც eslint-ის იმ წესებს თიშავს, რომლებმაც შეიძლება prettier-თან კონფლიქტი გამოიწვიოს)

• eslint-plugin-prettier(eslint-ის პლაგინი, რომლის საშუალებითაც eslint-ის CLI tool-ს შეეძლება ყოველი eslint-ის ფორმატის შემგომ ავტომატურად გაუშვას prettier)

შეგვიძლია შემდეგი ბრძანებებით დაინსტალირება:

npm install eslint --save-dev
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier

.eslintrc.json-ის საბოლოო ვერსია

{
    "extends": [
        "react-app",
        "prettier"
      ],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error"
    }
}

.prettierrc.json-ის საბოლოო ვერსია

{
    "singleQuote": true,
    "jsxSingleQuote": true
}

VS Code-ისთვის settings.json, რომ ყოველ დასეივებაზე გაეშვას eslint-ი perttier-თან ერთად:

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

ღმერთი თქვენსკენ დზმებო ☭