نحوه کدگذاری بهتر با ESLint و پیکربندی Prettier

قبل از اینکه ما به موضوع بپردازیم ، ممکن است شما ندانید ESLint و / یا Prettier چیست. ESLint ابزاری برای پر کردن جاوا اسکریپت و TypeScript است. این کد شما را اسکن می کند و خطاهای احتمالی را با رنگ قرمز و هشدارها را با زرد مشخص می کند. برای بهبود کیفیت کد و جلوگیری از اشکالات بسیار مفید است. Prettier ابزاری برای قالب بندی است ، از بسیاری از زبانها (JavaScript، TypeScript، CSS، HTML، Markdown، JSON، Yaml و غیره) پشتیبانی می کند. مفید است که کد خود را قابل خواندن نگه دارید و اطمینان حاصل کنید که قالب کد هنگام کار در یک تیم ثابت است.

من ابتدا نحوه تنظیم صحیح و اجرای دستی آنها در ترمینال را توضیح خواهم داد ، سپس به شما نحوه راه اندازی Visual Studio Code را برای اجرای خودکار ESLint و Prettier به شما نشان می دهم. سرانجام من به شما نشان می دهم که چگونه یک قلاب قبل از مرتکب راه اندازی کنید که ESLint و Prettier را قبل از ارتکاب اجرا کنید و اگر ESLint و / یا Prettier مشکلی در کد شما وجود دارد ، مرتکب آن را لغو کنید.

در حال حاضر بسیاری از آموزش ها در مورد چگونگی دستیابی به این هدف وجود دارد ، اما بیشتر آنها استفاده از eslint-plugin-prettier که اساساً Prettier را از طریق ESLint اجرا می کند. طبق اسناد رسمی Prettier این روش توصیه نمی شود. در عوض من نشان خواهم داد …