آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 26) - بررسی Javascript با JSHint -قسمت 1

- visibility ۰ mode_comment

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

در این جلسه قصد داریم در مورد پلاگین grunt-contrib-jshint صحبت کنیم و با استفاده از اون کدهای Javascript خودمون رو عیب یابی کنیم و مشکلات اون رو بفهمیم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:

بعد از اینکار اینتر میزنیم:grunt install jshint

همونطور که در بالا میبینید، یه هشدار داده شده و گفته که بهتره jshint رو بصورت global نصب کنیم. برای اینکار عبارت زیر رو در cmd تایپ میکنیم:

اینتر میزنیم:grunt install jshint 2

میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:grunt install jshint 3

حالا باید این بسته رو درون gruntfile.js لود کنیم:grunt install jshint 4

حالا باید یک وظیفه بنام jshint بسازیم:

دیدید که بعد از task هایی که قبلا ساخته بودیم، وظیفه jshint رو هم ساختیم.

قبل از اینکه تنظیمات درون jshint رو قرار بدیم، باید مشخص کنیم که چه فایلهای js رو میخایم مورد هدف قرار بدیم. ما در جلسات قبلی یک فایل بنام final.js رو از فایلهای دیگه و با استفاده از grunt ساختیم و در این جلسه میخایم با استفاده از jshint اون رو بررسی کنیم. در ابتدا بگم که این پلاگین از ابزار jshint برای این کار استفاده میکنه، پس شما میتونین هر ویژگی که در jshint قابل استفاده هست رو، در اینجا هم استفاده کنید. فایل final.js بصورت زیر هست:

اگر به سایت اصلی jshint سر زده باشید، میدونید که همه این کارا رو میشه با استفاده از اون انجام داد.jshint site

میبینید که دو بخش اصلی راست و چپ در تصویر بالا وجود داره. کدهای Js مورد نظرتون رو باید در قسمت سمت چپ قرار بدین و قسمت سمت راست هم ارورها و هشدارها و توضیحات کد شما رو براتون قرار میده و راهنماییتون میکنه که کجای کدتون مشکل داره و اونو بررسی میکنه. مثلا فرض کنید کدهای همون فایل final.js رو درون سایت مورد نظر کپی کنیم و ببینیم که چه پیامهایی نمایش داده میشه:jshint site 2

همونطور که میبینید در قسمت Metrics توضیحاتی در مورد کدها و تابع داده و در یک warning در خط 29 داریم که گفته برای debugger حالت یا Statement رو مشخص نکردیم. همچنین بیان شده که در خط 13 یک متغیر بنام result داریم که بدون استفاده هست و هیج جا با اون کاری نداریم. حالا اگر شما یکی از { یا ... رو بردارید، فورا و بصورت اتوماتیک ارورهای متناسب داده میشه و شما میفهمید که مشکل از کجا هست. همچنین در قسمت بالای ستون سمت راست، یک گزینه بنام Configure وجود داره که با کلیک بر روی اون یک قسمت باز میشه که میتونین ویژگی هایی که دوس دارید بررسی بشه یا نشه رو متناسب با علاقه خودتون تغییر بدین.

در جلسه بعد به ادامه موضوع خواهیم پرداخت.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.