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

پیش نیازها

برای شروع، شما نیاز به گره، NPM (گره مدیر بسته)، و CLI (رابط خط فرمان) از ابزار ساخت مربوطه که در سیستم شما نصب شده است دارید. اگر شما مطمئن نیستید که آیا این بسته برای شما نصب شده است، تایید آن را به آسانی به عنوان تایپ کردن خطوط فرمان میتوانید ببینید.

انجام وظایف در ویژوال استودیو کد به صورت خودکار

انجام وظایف در ویژوال استودیو کد

من هم فرض می کنیم که فایل ها و دایرکتوری در پروژه شماذ در محل مناسب خود هستند، از جمله فایل پیکربندی، مانند gulpfile.js یا Gruntfile.js و وابستگی های پروژه ثبت شده در package.json نیز باید در این نقطه نصب شده باشد.

موارد زیر دایرکتوری پروژه ما و فایل های ایجاد شده برای هدف از تظاهرات در این مقاله است.شما ممکن است فایل های بیشتر یا کمتر داشته باشید

[php]
<div class="line number1 index0 alt2"><code class="bash plain">.</code></div>
<div class="line number2 index1 alt1"><code class="bash plain">├── css</code></div>
<div class="line number3 index2 alt2"><code class="bash plain">│   ├── sass</code></div>
<div class="line number4 index3 alt1"><code class="bash plain">├── gulpfile.js</code></div>
<div class="line number5 index4 alt2"><code class="bash plain">├── index.html</code></div>
<div class="line number6 index5 alt1"><code class="bash plain">├── js</code></div>
<div class="line number7 index6 alt2"><code class="bash plain">│   ├── src</code></div>
<div class="line number8 index7 alt1"><code class="bash plain">├── node_modules</code></div>
<div class="line number9 index8 alt2"><code class="bash plain">└── package.json</code></div>
<div class="line number9 index8 alt2">[/php]

تعدادی از وظایف ثبت شده در gulpfile.js شرح زیر است:

[php]</div>
<div class="line number9 index8 alt2">var gulp = require(‘gulp’);
var uglify = require(‘gulp-uglify’);
var sass = require(‘gulp-sass’);

var jsSrc = ‘./js/src/**/*.js’;
var sassSrc = ‘./css/sass/**/*.scss’;

gulp.task( ‘scripts’, function() {
return  gulp.src( jsSrc )
.pipe( uglify() )
.pipe( gulp.dest( ‘./js’ ) )
});

gulp.task( ‘styles’, function() {
return  gulp.src( sassSrc )
.pipe( sass( { outputStyle: ‘compressed’ } ) )
.pipe( gulp.dest( ‘./css’ ) );
});

gulp.task( ‘automate’, function() {
gulp.watch( [ sassSrc, jsSrc ], [ ‘scripts’, ‘styles’ ] );
});

gulp.task( ‘default’, [‘scripts’, ‘styles’, ‘automate’] );</div>
<div class="line number9 index8 alt2">[/php]

 

 

اجرا  خودکار وظایف

در حال اجرا و خودکار “وظایف” در ویژوال استودیو کد بسیار ساده است. نخست، راه اندازی فرماندهی پالت با فشار دادن کلیدهای Shift + کلید ترکیبی، کلیدهای Cmd + P و یا از طریق نوار منو، نمایش> فرماندهی پالت را انجام دهید سپس، نوع وظایف، و انتخاب گزینه “وظایف: اجرای کار” از چند تعدادی از گزینه های نشان داده شده را انتخاب کنید.

چگونگی چگونگی انجام وظایف در ویژوال استودیو کد به صورت خودکار

انجام وظایف در ویژوال استودیو کد به صورت خودکار

 

کد های ویژوال استودیو  هوشمند است.  لیستی از وظایف است که ما در فایل تعریف شده است.
انجام وظایف در ویژوال استودیو کد به صورت خودکار

انجام وظایف در ویژوال استودیو کد

در اینجا،به طور پیش فرض وظیفه را انتخاب کنید. شیوه SCSS و جاوا اسکریپت  پس از انتخاب خواهد شد.این وظیفه وارد شدهو به طور خودکار این کار انجام میشود

هنگام تغییر یک فایل – یک شیوه یا یک فایل جاوا اسکریپت – آن را به طور خودکار وارد خواهد شد. کد های ویژوال استودیو نیز تولید گزارش به موقع برای هر موفقیت و اشتباهات است که در عمل ساخت رخ می دهد.

انجام وظایف در ویژوال استودیو کد

ویژوال استودیو کد به صورت خودکار

INTERGRATION عمیق

علاوه بر این، ما می توانیم پروژه ها را  به ویژوال استودیو بدهیم. و یکپارچه سازی وظایف ما در ویژوال استودیو  آسان و سریع میشود

راه اندازی فرماندهی پالت را انتخاب کنید “تنظیمات وظیفه دونده”. کد های ویژوال استودیو یک لیست از ابزار ساخت  را پشتیبانی می کند.

INTERGRATION عمیق

INTERGRATION عمیق

کد های ویژوال استودیو در حال حاضر باید یک فایل جدید تحت .vscode نام tasks.json در دایرکتوری پروژه خود را ایجاد کرده باشند.

شما می توانید در زیر مشاهده کنید، در انجام وظایف اموال در حال حاضر فقط یک آرایه خالی است.

[php]</div>
<div class="line number9 index8 alt2">
<div class="line number1 index0 alt2"><code class="javascript plain">{</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">  </code><code class="javascript string">"version"</code><code class="javascript plain">: </code><code class="javascript string">"0.1.0"</code><code class="javascript plain">,</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">  </code><code class="javascript string">"command"</code><code class="javascript plain">: </code><code class="javascript string">"gulp"</code><code class="javascript plain">,</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">  </code><code class="javascript string">"isShellCommand"</code><code class="javascript plain">: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces">  </code><code class="javascript string">"args"</code><code class="javascript plain">: [</code></div>
<div class="line number6 index5 alt1"><code class="javascript spaces">  </code><code class="javascript string">"–no-color"</code></div>
<div class="line number7 index6 alt2"><code class="javascript spaces">  </code><code class="javascript plain">],</code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces">  </code><code class="javascript string">"tasks"</code><code class="javascript plain">: []</code></div>
<div class="line number9 index8 alt2"><code class="javascript plain">}</code></div>
<div class="line number9 index8 alt2">[/php]

گسترش ارزش وظایف به شرح زیر است.

[php]</div>
<div class="line number9 index8 alt2">
<div class="line number1 index0 alt2"><code class="javascript plain">{</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">  </code><code class="javascript string">"version"</code><code class="javascript plain">: </code><code class="javascript string">"0.1.0"</code><code class="javascript plain">,</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">  </code><code class="javascript string">"command"</code><code class="javascript plain">: </code><code class="javascript string">"gulp"</code><code class="javascript plain">,</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">  </code><code class="javascript string">"isShellCommand"</code><code class="javascript plain">: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces">  </code><code class="javascript string">"args"</code><code class="javascript plain">: [</code></div>
<div class="line number6 index5 alt1"><code class="javascript spaces">  </code><code class="javascript string">"–no-color"</code></div>
<div class="line number7 index6 alt2"><code class="javascript spaces">  </code><code class="javascript plain">],</code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces">  </code><code class="javascript string">"tasks"</code><code class="javascript plain">: [{</code></div>
<div class="line number9 index8 alt2"><code class="javascript spaces">    </code><code class="javascript string">"taskName"</code><code class="javascript plain">: </code><code class="javascript string">"default"</code><code class="javascript plain">,</code></div>
<div class="line number10 index9 alt1"><code class="javascript spaces">    </code><code class="javascript string">"isBuildCommand"</code><code class="javascript plain">: </code><code class="javascript keyword">true</code><code class="javascript plain">,</code></div>
<div class="line number11 index10 alt2"><code class="javascript spaces">  </code><code class="javascript plain">}]</code></div>
<div class="line number12 index11 alt1"><code class="javascript plain">}</code></div>
<div class="line number12 index11 alt1">[/php]

taskName نام وظیفه در gulpfile.js ما است که ما می خواهم برای اجرای مشخص کنیم. اموال isBuildCommand دستور به طور پیش فرض به عنوان “ساخت” دستور تعریف می کند. در حال حاضر، به جای رفتن به فرماندهی پالت، شما می توانید به سادگی شیفت کلید ترکیبی + کلیدهای Cmd + B را فشار دهید
INTERGRATION عمیق در ویژال استودیو

INTERGRATION عمیق

امیدواریم این مقاله به شما در چگونگی انجام وظایف در ویژوال استودیو کد به صورت خودکار کمک کرده باشد.برای مشاهده مقالات بیشتر درباره ی طراحی قالب وردپرس به https://www.on5.ir مراجعه نمایید
انفایو مرجع مقالات تخصصی طراحی قالب وردپرس

نظر خود را بگذارید

-- بارگیری کد امنیتی --