من اخیراً به یک افزونه منحصر به فرد و سرگرم کننده برای VS Code به نام vscode-pets برخوردم که توسط آنتونی شاو. این برنامه افزودنی یک حیوان خانگی مجازی مانند سگ🐶 را به صفحه نمایش شما اضافه می کند و باعث حواس پرتی از کدنویسی می شود. با این حال، بسیاری از گزینه های حیوان خانگی دیگر برای انتخاب وجود دارد.
افزونه های VS Code پلاگین هایی هستند که می توانند تجربه کدنویسی شما را با ویرایشگر کد ویژوال استودیو بهبود بخشند. آنها طیف وسیعی از ویژگی ها را ارائه می دهند، از جمله برجسته کردن نحو، قالب بندی کد، اشکال زدایی، آزمایش، پرده، قطعه، تم ها، نمادها و موارد دیگر. VS Code با در نظر گرفتن توسعه پذیری طراحی شده است و شخصی سازی و متناسب با نیازهای شما را آسان می کند. بازار VS Code در حال حاضر بیش از 30000 برنامه افزودنی را ارائه می دهد که از برنامه های افزودنی زبان و تم تا برنامه های افزودنی یکپارچه و حتی گزینه های سرگرم کننده و عجیب را شامل می شود.
برای شروع ایجاد افزونه VS Code خود، باید Node.js را روی سیستم خود نصب کنید. هنگامی که Node.js را راه اندازی کردید، می توانید از یک ابزار خط فرمان به نام yo (مخفف Yeoman) برای ایجاد یک الگوی پروژه استفاده کنید. این الگو یک ساختار و فایل های اساسی برای برنامه افزودنی شما، از جمله یک فایل مانیفست که متادیتا و وابستگی های برنامه افزودنی را تعریف می کند، در اختیار شما قرار می دهد. سپس می توانید این الگو را سفارشی کرده و بر روی آن بسازید تا عملکرد مورد نظر خود را ایجاد کنید.
مشکل
React چارچوب جاوا اسکریپت مورد علاقه من است به دلیل تطبیق پذیری و ویژگی های قدرتمندش. با این حال، گاهی اوقات ایجاد حالت کامپوننت در React می تواند کمی دردسرساز باشد و نیاز به تایپ زیادی دارد. در پست امروز، ما به این موضوع می پردازیم و راه هایی را برای کم کردن این فرآیند خسته کننده تر بررسی می کنیم. در حالی که تلاشی برای اصلاح کل فریمورک نداریم، افزونه‌ای ایجاد می‌کنیم که می‌تواند ایجاد حالت در اجزای React را ساده کند.
const [counter, setCounter] = useState(0);
ایجاد یک حالت شمارنده ساده در React می تواند شامل تایپ های زیادی باشد که می تواند خسته کننده و وقت گیر باشد. همه ما می دانیم که تایپ مکرر همان کد چقدر می تواند خسته کننده باشد، درست است؟ اینجاست که برنامه افزودنی جدید ما، react-setstate وارد می‌شود. با این افزونه، می‌توانیم متغیرهای حالت را تنها با چند ضربه کلید ایجاد کنیم و در وقت و تلاش ما صرفه‌جویی کنیم.
راه اندازی محیط توسعه
برای شروع کار با ایجاد پسوند Visual Studio Code، باید دو بسته yo و generator-code را نصب کنیم. اینها را می توان به صورت سراسری با استفاده از npm با دستور زیر نصب کرد:
npm install -g yo generator-code
yo یک ابزار داربست محبوب است که به توسعه دهندگان کمک می کند تا پروژه های جدیدی را با استفاده از ژنراتورهای قابل تنظیم ایجاد کنند. generator-code یک ژنراتور است که به طور خاص برای ایجاد پسوندهای Visual Studio Code طراحی شده است. با نصب این دو بسته، ما قادر خواهیم بود به سرعت یک پروژه افزونه جدید تولید کنیم و بلافاصله کدنویسی را شروع کنیم!
اکنون که بسته های لازم را نصب کرده ایم، می توانیم شروع به ساخت پروژه خود کنیم. برای انجام این کار، ترمینال خود را باز کرده و دستور زیر را اجرا کنید:
yo code
این یک پوسته تعاملی راه اندازی می کند که ما را در روند ایجاد برنامه افزودنی جدید راهنمایی می کند. از ما خواسته می شود که جزئیات مختلفی را در مورد برنامه افزودنی خود وارد کنیم، مانند نام، توضیحات و نوع افزونه ای که می خواهیم ایجاد کنیم. با پیروی از دستورات و پاسخ دادن به سوالات، ما قادر خواهیم بود به سرعت داربست را برای برنامه افزودنی جدید خود تولید کنیم و شروع به ساخت کد خود کنیم.
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? react-setstate
? What's the identifier of your extension? react-setstate
? What's the description of your extension? set state in react
? Enable JavaScript type checking in 'jsconfig.json'? No
? Initialize a git repository? Yes
? Which package manager to use? npm
هنگامی که به تمام درخواست‌های موجود در پوسته تعاملی yo پاسخ دادیم، بر اساس ورودی‌های ما پروژه جدیدی برای ما ایجاد می‌کند. با رفتن به دایرکتوری آن در ترمینال و اجرای دستور زیر می توانیم این پروژه را در Visual Studio Code باز کنیم:
code .
آناتومی پروژه
ساختار پروژه ما باید چیزی شبیه به این باشد، اگر TypeScript را انتخاب کرده باشید، ممکن است چند فایل اضافی داشته باشید. ما تمام پرونده ها را مرور خواهیم کرد و دلیل وجود آنها را توضیح خواهیم داد.
├── .vscode // launch a new window for testing
│ ├── launch.json
│ └── tasks.json
├── node_modules //node_modules
├── test //tests
│ ├── suite
│ ├── ├── extension.test.js
│ └── runTest.js
├── .eslintrc.json // ESLint config
├── .gitignore //ignore node_modules and other specified files
├── .vscodeignore //ignore files we don't have published
├── CHANGELOG.md //keep track of changes
├── extension.js //source code
├── jsconfig.json //JS config
├── package-lock.json //generated by npm
├── package.json //manifest
├── README.md //info about extension
├── vsc-extension-quickstart.md //quick start guide
- را
launch.jsonوtasks.jsonبرای راه اندازی یک پنجره جدید از کد VS برای آزمایش برنامه افزودنی استفاده می شود. -
node_modules– node_modules برای پروژه ما. - را
testپوشه شامل تمام تست های پسوند ما خواهد بود. -
.eslintrc.jsonشامل پیکربندی ESLint برای این پروژه خواهد بود. -
.gitignoreحاوی لیستی از نام فایل‌ها و/یا پوشه‌هایی است که وقتی برنامه افزودنی ما را به پلتفرم کنترل نسخه مانند Github فشار می‌دهید، درج نمی‌شود. -
.vscodeignoreحاوی لیستی از نام فایل ها و/یا پوشه هایی است که باید در نهایت پس از انتشار برنامه افزودنی خود منتشر شوند. -
CHANGELOG.mdبرای پیگیری تغییراتی که در برنامه افزودنی خود ایجاد می کنیم استفاده می شود. -
extension.jsاینجاست که ما کد/منطق را در پس پسوند (نقطه ورودی) خود می نویسیم. -
jsconfig.jsonشامل پیکربندی جاوا اسکریپت ما خواهد بود -
package.jsonفایل مانیفست هر پروژه Node.js است و حاوی ابرداده پروژه است. -
README.mdحاوی اطلاعات مربوط به برنامه افزودنی ما خواهد بود. -
vsc-extension-quickstart.mdراهنمای شروع سریع پیش‌فرض است که با پروژه ما ارائه می‌شود.
نقطه ورود
باز کن extension.js فایلی که حاوی کد دیگ بخار و نظرات است. قبل از اینکه به پاکسازی آن بپردازیم، اجازه دهید به طور خلاصه کد را درک کنیم.
const vscode = require('vscode');
ماژول API توسعه پذیری vscode را وارد می کند.
function activate(context) {
console.log('Congratulations, your extension "react-setstate" is now active!');
let disposable = vscode.commands.registerCommand('react-setstate.helloWorld', function () {
vscode.window.showInformationMessage('Hello World from react-setstate!');
});
context.subscriptions.push(disposable);
}
مورد فوق است activate عملکردی که با فعال شدن برنامه افزودنی ما تماس می گیرد.
let disposable = vscode.commands.registerCommand('react-setstate.helloWorld', function () {
vscode.window.showInformationMessage('Hello World from react-setstate!');
});
را react-setstate.helloWorld یک شناسه منحصر به فرد برای یک فرمان است که در هنگام راه اندازی یک عمل خاص را انجام می دهد. به عنوان مثال، زمانی که react-setstate.helloWorld دستور فراخوانی می شود، پیامی را نشان می دهد که “Hello World from react-setstate!”. با این حال، شناسه‌های فرمان می‌توانند طولانی باشند، و تایپ کردن آنها در هر زمان ممکن است خسته‌کننده باشد. بنابراین، می‌توانیم برای سهولت استفاده، نام‌های ساده‌تری را به این شناسه‌های فرمان اختصاص دهیم
package.json
در package.json فایل، در زیر قسمت مشارکت، آرایه ای به نام دستورات وجود دارد که شامل شناسه فرمان پیش فرض است. به طور پیش فرض، عنوان react-setstate.helloWorld دستور روی چیزی به یاد ماندنی تنظیم شده است، “Hello World”. هر شناسه دستور جدیدی که ثبت می کنیم می تواند به این آرایه اضافه شود. برای اجرای برنامه افزودنی، می توانیم فشار دهیم Ctrl + F5، که یک پنجره VS Code جدید با نام باز می کند[Extension Development Host]برای راه اندازی برنامه افزودنی خود، می توانیم فشار دهیم Ctrl + Shift + P برای باز کردن پالت فرمان، نامی را که پسوند داده ایم (در این مورد “Hello World”) تایپ کرده و Enter را فشار دهید.
این برنامه افزودنی ما را راه اندازی می کند
ما می توانیم متوقف کنیم Extension Development Host با فشار دادن مربع قرمز
extension.js
این آموزش بسیار طولانی شده است، بنابراین برای صرفه جویی در زمان، کد را پیست می کنم و سپس توضیح می دهم که هر قسمت چه کاری انجام می دهد.
const vscode = require('vscode');
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
let disposable = vscode.commands.registerCommand('react-setstate.setState', async function () {
const inputText = await vscode.window.showInputBox({
placeHolder: "Eg: show modal",
prompt: "Enter the name of your state.",
});
if (inputText === "") {
vscode.window.showErrorMessage(
"You need to type in something for this to work😊."
);
return;
}
if (inputText == null) return;
const words = inputText.split(" ");
const stateList = [];
const actionList = [];
for (let i = 0; i < words.length; i++) {
if (i !== 0) {
stateList.push(capitalize(words[i]));
} else {
stateList.push(words[i]);
}
actionList.push(capitalize(words[i]));
}
const transformedState = stateList.join("");
const transformedAction = "set" + actionList.join("");
const text = `const [${transformedState} , ${transformedAction}] = useState(null)`;
const editor = vscode.window.activeTextEditor;
if (editor) {
const selection = editor.selection;
editor.edit((editBuilder) => {
editBuilder.replace(selection, text);
});
}
});
context.subscriptions.push(disposable);
}
// This method is called when your extension is deactivated
function deactivate() {}
function capitalize(word) {
return word.charAt().toUpperCase() + word.slice(1);
}
module.exports = {
activate,
deactivate
}
- تابع فعال کردن را ثبت می کند
react-setstate.setStateشناسه فرمان که قبلاً در فایل extension.js تعریف کردیم.
در مرحله بعد، ما باید آن را به روز کنیم package.json فایلی که منعکس کننده این تغییر است. ما باید نام دستور خود را به react-setstate.setState و عنوان مناسبی به آن بدهید. در حال حاضر، ما آن را صدا خواهیم کرد React setState، اما می توانید هر نامی را که ترجیح می دهید انتخاب کنید.
"commands": [
{
"command": "react-setstate.setState",
"title": "React setState"
}
]
فراموش نکنید که آرایه “activationEvents” را نیز به روز کنید.
"activationEvents": [
"onCommand:react-setstate.setState"
],
- پس از فعال شدن برنامه افزودنی، از کاربر خواسته می‌شود نام حالتی را که می‌خواهد ایجاد کند، وارد کند که در آن ذخیره می‌شود.
inputTextمتغیر.
const inputText = await vscode.window.showInputBox({
placeHolder: "Eg: show modal",
prompt: "Enter the name of your state.",
});
- اگر کاربر چیزی را تایپ نکرده باشد و دستور را خالی بگذارد، دستور را می بندیم و پیامی مبنی بر ایجاد حالت ایجاد نشده برمی گردانیم.
if (inputText === "") {
vscode.window.showErrorMessage(
"You need to type in something for this to work😊."
);
return;
}
if (inputText == null) return;
- دلیل تقسیم متن بر اساس فاصله این است که نام یک ایالت به طور بالقوه می تواند چندین کلمه داشته باشد، مانند “show modal”، و ما می خواهیم بتوانیم هر کلمه را به صورت جداگانه با حروف بزرگ بنویسیم.
const words = inputText.split(" ");
- تابع بزرگ کردن یک تابع کمکی است که یک رشته می گیرد و حرف اول هر کلمه در رشته را بزرگ می کند. ما از این تابع برای اطمینان از اینکه نام ایالت وارد شده توسط کاربر به درستی با حروف بزرگ نوشته شده است استفاده خواهیم کرد.
function capitalize(word) {
return word.charAt().toUpperCase() + word.slice(1);
}
- روش مرسوم ایجاد حالت ها در React شامل تعریف یک متغیر با استفاده از قلاب useState است که معمولاً به شکل زیر است:
const [showModal, setShowModal] = useState(false)
در سمت چپ، خود دولت را داریم و در سمت راست، عمل را داریم. به همین دلیل ما دو آرایه داریم: stateList نسخه های با حروف بزرگ تمام کلماتی که کاربر تایپ کرده است، به جز کلمه اول، ذخیره می کند.
for (let i = 0; i < words.length; i++) {
if (i !== 0) {
stateList.push(capitalize(words[i]));
} else {
stateList.push(words[i]);
}
actionList.push(capitalize(words[i]));
}
const stateList = ['show', 'Modal']
const actionList = ['Show', "Modal']
پس از کد بالا، آرایه stateList باید شامل تمام کلمات با حروف بزرگ از ورودی کاربر به جز کلمه اول باشد. آرایه actionList باید حاوی نسخه بزرگ کلمه اول باشد که کلمه “Modal” را دنبال می کند.
if (i !== 0) {
stateList.push(capitalize(words[i]));
}
- ما می توانیم عناصر را در خود به هم بچسبانیم
stateListآرایه ای برای تشکیل یک رشته از آنجا کهstateListدر حال حاضر تمام کلمات بزرگ مورد نیاز ما را دارد، می‌توانیم آنها را مستقیماً بدون پردازش بیشتر به یکدیگر بپیوندیم.
const transformedState = stateList.join(""); // showModal
- در اینجا ما عناصر آرایه actionList را به هم می پیوندیم تا یک رشته با مجموعه پیشوند تشکیل دهیم.
const transformedAction = "set" + actionList.join("");
- حالا باید دو رشته مجزا داشته باشیم.
const transformedState = "showModal"
const transformedAction = "setShowModal"
اکنون تنها کاری که باید انجام دهیم این است که آنها را به هم نزدیک کند.
const text = `const [${transformedState} , ${transformedAction}] = useState(null)`;
این درج است transformedState و transformedAction رشته به رشته بالا.
const text = `const [showModal , setShowModal] = useState(null)`;
رشته ما اکنون باید مانند شکل بالا باشد.
اکنون که وضعیت خود را داریم، به راهی برای چسباندن آن متن در ویرایشگر/VS Code خود نیاز داریم.
const editor = vscode.window.activeTextEditor;
برای دریافت ویرایشگر متن فعال فعلی، از vscode.window.activeTextEditor. سپس می توانیم از selection.active برای بدست آوردن موقعیت مکان نما در ویرایشگر متن استفاده کنیم.
const selection = editor.selection;
در نهایت از خط زیر برای جایگزینی متن روی آن خط با متن خود استفاده می کنیم.
if (editor) {
const selection = editor.selection;
editor.edit((editBuilder) => {
editBuilder.replace(selection, text);
});
}
برای آزمایش اینکه آیا همه چیز همانطور که انتظار می رود کار می کند یا خیر، می توانید برنامه افزودنی را با فشار دادن اجرا کنید Ctrl + F5.
در حال انتشار برنامه افزودنی ما
با توجه به اینکه همه چیز طبق انتظار کار می کند، زمان آن رسیده است که برنامه افزودنی خود را منتشر کنیم و آن را برای استفاده دیگران در دسترس قرار دهیم. برای انجام این کار، به یک توکن دسترسی شخصی از Azure DevOps و یک حساب ناشر نیاز داریم.
هنگامی که سازمان خود را در Azure DevOps راه اندازی کردید، می توانید این مراحل را برای ایجاد رمز دسترسی شخصی خود دنبال کنید:
رمز دسترسی شخصی
- روی نماد کاربر در کنار تصویر پروفایل کلیک کنید.
- روی نشانه دسترسی شخصی کلیک کنید.
- این باید شما را به صفحه ای ببرد تا توکن جدید تولید کنید.
- روی New Token کلیک کنید تا یک مدال باز شود.
- در مودال، اطلاعات لازم را برای توکن خود ارائه دهید.
- روی Show more scopes کلیک کنید و به دنبال Marketplace بگردید و گزینه Manage را علامت بزنید.
- برای ایجاد توکن خود روی ایجاد کلیک کنید.
- مطمئن شوید که توکن را کپی کنید زیرا بعداً به آن نیاز خواهیم داشت.
ناشر
ما باید یک ناشر ایجاد کنیم تا پسوند ما را تحت آن منتشر کند. این مراحل را دنبال کنید:
- به صفحه ثبت نام ناشر بروید.
- برای ایجاد ناشر جدید بر روی Create Publisher کلیک کنید.
- به یاد داشته باشید که نام منحصر به فرد ناشر را در جایی امن کپی و جایگذاری کنید، زیرا بعداً برای ورود به آن به آن نیاز خواهیم داشت.
با کپی شدن نام ناشر، باید فیلد ناشر را در قسمت به روز رسانی/ایجاد کنیم package.json فایل با نام ناشر ما
"publisher": "your-publisher-name",
نصب vsce
npm install -g @vscode/vsce
vsce یک ابزار CLI برای مدیریت پسوندهای VS Code است. از آن برای ورود با نام ناشر و رمز دسترسی شخصی خود استفاده کنید.
vsce login <unique publisher name>
vsce publish
اگر با پیام خطایی مواجه شدید که به شما دستور به‌روزرسانی فایل README.md را می‌دهد، می‌توانید از الگوی زیر استفاده کنید یا قالب خود را ایجاد کنید. README.md متن
# react-setstate README
react-setstate is an extension that allows react developers to create state quickly.
پس از انتشار برنامه افزودنی، در VS Code Marketplace تأیید می شود که ممکن است چند دقیقه طول بکشد. در اینجا می توانید وضعیت فرآیند تأیید را بررسی کنید.
تبریک می گویم! برنامه افزودنی شما با موفقیت در VS Code ایجاد و منتشر شده است [marketplace].
(https://marketplace.visualstudio.com/vscode) برای دانلود و استفاده هر کسی.
- کد منبع را اینجا بررسی کنید.
- پسوند را از اینجا دانلود کنید.
