
کد های ویژوال استودیو اجازه می دهد شما را به اجرا وظایف و کارها یخود را بدون نیاز به ترک پنجره ویرایشگر انجام دهید.در این مقاله ما به شما چگونگی انجام وظایف در ویژوال استودیو کد به صورت خودکار را نشان میدهیم
پیش نیازها
برای شروع، شما نیاز به گره، NPM (گره مدیر بسته)، و CLI (رابط خط فرمان) از ابزار ساخت مربوطه که در سیستم شما نصب شده است دارید. اگر شما مطمئن نیستید که آیا این بسته برای شما نصب شده است، تایید آن را به آسانی به عنوان تایپ کردن خطوط فرمان میتوانید ببینید.
من هم فرض می کنیم که فایل ها و دایرکتوری در پروژه شماذ در محل مناسب خود هستند، از جمله فایل پیکربندی، مانند gulpfile.js یا Gruntfile.js و وابستگی های پروژه ثبت شده در package.json نیز باید در این نقطه نصب شده باشد.
موارد زیر دایرکتوری پروژه ما و فایل های ایجاد شده برای هدف از تظاهرات در این مقاله است.شما ممکن است فایل های بیشتر یا کمتر داشته باشید
<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">
</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">
در حال اجرا و خودکار “وظایف” در ویژوال استودیو کد بسیار ساده است. نخست، راه اندازی فرماندهی پالت با فشار دادن کلیدهای Shift + کلید ترکیبی، کلیدهای Cmd + P و یا از طریق نوار منو، نمایش> فرماندهی پالت را انجام دهید سپس، نوع وظایف، و انتخاب گزینه “وظایف: اجرای کار” از چند تعدادی از گزینه های نشان داده شده را انتخاب کنید.
در اینجا،به طور پیش فرض وظیفه را انتخاب کنید. شیوه SCSS و جاوا اسکریپت پس از انتخاب خواهد شد.این وظیفه وارد شدهو به طور خودکار این کار انجام میشود
هنگام تغییر یک فایل – یک شیوه یا یک فایل جاوا اسکریپت – آن را به طور خودکار وارد خواهد شد. کد های ویژوال استودیو نیز تولید گزارش به موقع برای هر موفقیت و اشتباهات است که در عمل ساخت رخ می دهد.
INTERGRATION عمیق
علاوه بر این، ما می توانیم پروژه ها را به ویژوال استودیو بدهیم. و یکپارچه سازی وظایف ما در ویژوال استودیو آسان و سریع میشود
راه اندازی فرماندهی پالت را انتخاب کنید “تنظیمات وظیفه دونده”. کد های ویژوال استودیو یک لیست از ابزار ساخت را پشتیبانی می کند.
کد های ویژوال استودیو در حال حاضر باید یک فایل جدید تحت .vscode نام tasks.json در دایرکتوری پروژه خود را ایجاد کرده باشند.
شما می توانید در زیر مشاهده کنید، در انجام وظایف اموال در حال حاضر فقط یک آرایه خالی است.
</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">
</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">