在進(jìn)行項(xiàng)目開發(fā)的時(shí)候,可能會(huì)遇到“想找某個(gè)色值”的場景,因?yàn)轭伾狄话闶菙?shù)字類型,沒有語義,不好全局搜索。所以就希望有一個(gè)工具,能夠快速展示工作目錄下的所有顏色,方便取值。
由于是在編寫代碼階段,所以這個(gè)工具最方便的其實(shí)是編輯器的插件。我使用VSCode插件,所以先來試試開發(fā)一個(gè)VSCode插件。
在正式開發(fā)之前,先來給這個(gè)插件取個(gè)好名字,color, see, 一想到這兩個(gè)單詞,我腦海里直接蹦出了“給你點(diǎn)顏色看看”的中文式表達(dá)”give you color to see”,看起來Color to See 是個(gè)好名字。
在開發(fā)之前,先來想想我們的”產(chǎn)品“長什么樣子,要實(shí)現(xiàn)什么功能。
插件要實(shí)現(xiàn)的目標(biāo)是能夠快速找到某個(gè)色值,所以我們要將顏色可視化,色值是最終我們希望能拿到的,所以需要將項(xiàng)目中所有的顏色收集起來,統(tǒng)一展示(包含可視化、色值)。
具體功能清單如下:
UI設(shè)計(jì)如下:
WebView可以用來創(chuàng)建自定義的視圖,可以看成是VSCode內(nèi)部的 Iframe 容器,可以渲染任何HTML, 通過消息傳遞實(shí)現(xiàn)通信,所以具備非常強(qiáng)大的頁面渲染和交互能力。
VSCode內(nèi)部提供了三個(gè)API可以創(chuàng)建WebView:
創(chuàng)建一個(gè)編輯器面板。即時(shí)的,關(guān)閉編輯器就銷毀了,主要用于那些不需要持久化狀態(tài)(在關(guān)閉后不需要恢復(fù))的場景,示例代碼如下:
const panel=vscode.window.createWebviewPanel(
'webviewId', // Webview 的標(biāo)識(shí)符
'My Webview', // 面板標(biāo)題
vscode.ViewColumn.One, // 面板顯示在哪個(gè)編輯器列中
{ enableScripts: true } // 額外的 Webview 選項(xiàng)
);
panel.webview.html="<html><body><h1>Hello, Webview!</h1></body></html>";
定義如何序列化和反序列化 WebView 面板的狀態(tài),這樣即使在 VSCode 重啟后,這個(gè) WebView 面板的狀態(tài)也可以被恢復(fù)。所以這種WebView,對(duì)于那些需要保留用戶狀態(tài)或信息的面板來說非常有用。
class MyWebviewPanelSerializer implements vscode.WebviewPanelSerializer {
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
// 重新設(shè)置 Webview 的內(nèi)容等
webviewPanel.webview.html="<html><body><h1>Restored Webview</h1></body></html>";
}
}
context.subscriptions.push(vscode.window.registerWebviewPanelSerializer('webviewId', new MyWebviewPanelSerializer()));
創(chuàng)建一個(gè)編輯器面板。持久的視圖,常駐在側(cè)邊欄(Sidebar)和面板(Panel)上
class MyWebviewProvider implements vscode.WebviewViewProvider {
resolveWebviewView(webviewView: vscode.WebviewView) {
webviewView.webview.html="<html><body><h1>Hello, Sidebar Webview!</h1></body></html>";
}
}
const provider=new MyWebviewProvider();
context.subscriptions.push(vscode.window.registerWebviewViewProvider('myWebview', provider));
考慮我們插件的使用場景一般是沒有UI稿的后臺(tái)開發(fā),使用次數(shù)不會(huì)很頻繁,所以插件的視圖不需要持久,所以可以選擇用createWebviewPanel創(chuàng)建一個(gè)編輯器面板來承載界面。
通過官方文檔給的腳手架命令,開始初始化我們的插件項(xiàng)目。目錄結(jié)構(gòu)如下:
├─ .eslintrc.json
├─ .gitignore
├─ .vscode
│ ├─ extensions.json
│ ├─ launch.json
│ ├─ settings.json
│ └─ tasks.json
├─ .vscode-test.mjs
├─ .vscodeignore
├─ .yarnrc
├─ CHANGELOG.md
├─ README.md
├─ package.json
├─ src
│ ├─ extension.ts
│ ├─ test
│ │ └─ extension.test.ts
├─ tsconfig.json
├─ vsc-extension-quickstart.md
├─ webpack.config.js
├─ yarn-error.log
└─ yarn.lock
在package.json文件中,可以看到main配置是dist文件夾下的extension.js文件,這是我們項(xiàng)目的入口文件,是Webpack把src/extentions.ts作為入口文件編譯過來的
看package.json的script配置,發(fā)現(xiàn)可以運(yùn)行yarn watch命令進(jìn)行熱更新,也就是實(shí)時(shí)把改動(dòng)的代碼編譯成可執(zhí)行的JS文件。
運(yùn)行完yarn watch后,通過按“F5”或者“運(yùn)行->啟動(dòng)調(diào)試”,運(yùn)行我們的插件,這時(shí)候VSCode會(huì)打開一個(gè)新的窗口,快捷鍵ctrl + shift + p輸入hello world
最后,點(diǎn)擊執(zhí)行這個(gè)命令,可以看到右下角彈出了歡迎標(biāo)語。如下圖所示:
如果修改了代碼,可以F5刷新debug窗口,也可以在debug窗口上使用快捷鍵command + R刷新,和在瀏覽器刷新網(wǎng)頁一樣。
以上就是 VSCode 插件開發(fā)起步的過程。
在package.json文件的commands屬性上新增extension.colorToSee,這個(gè)命令是使用我們插件的起點(diǎn),所以務(wù)必寫個(gè)好title,為了讓插件國際化,我的title設(shè)置為"ColorToSee: Show colors of the working directory in a webview panel"
"commands": [
{
"command": "extension.colorToSee",
"title": "ColorToSee: Show colors of the working directory in a webview panel"
}
],
這個(gè)命令的執(zhí)行回調(diào)函數(shù)在extension.ts文件上,重點(diǎn)代碼如下:
vscode.commands.registerCommand(COMMAND_NAME, ()=> {
registerWebviewViewProvider(context);
})
在這串代碼中,我們把具體的實(shí)現(xiàn)邏輯封裝在registerWebviewViewProvider方法上,接下來我們可以只關(guān)注這個(gè)方法的實(shí)現(xiàn)。
使用WebView API createWebviewPanel來創(chuàng)建一個(gè)自定義的HTML頁面,基本的代碼塊如下所示:
const panel=vscode.window.createWebviewPanel(
CatCodiconsPanel.viewType,
"Cat Codicons",
column || vscode.ViewColumn.One
);
panel.webview.html=_getHtmlForWebview(panel.webview, extensionUri);
function _getHtmlForWebview(webview: vscode.Webview) {
// Use a nonce to only allow specific scripts to be run
const nonce=getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Use a content security policy to only allow loading images from https or from our extension directory, and only allow scripts that have a specific nonce. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your View</title>
</head>
<body>
<h1>Hello from Your View!</h1>
</body>
</html>`;
}
function getNonce() {
let text='';
const possible='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i=0; i < 32; i++) {
text +=possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
在registerWebviewViewProvider方法中,我們將基于上述代碼做些改造,大致的框架如下:
const registerWebviewViewProvider=(context: vscode.ExtensionContext)=> {
const provider=new ViewProvider(context.extensionUri, config);
const panel=vscode.window.createWebviewPanel(
ViewProvider.viewType, // Webview 的標(biāo)識(shí)符
PANEL_TITLE, // 面板標(biāo)題
vscode.ViewColumn.One, // 面板顯示在哪個(gè)編輯器列中
{
enableScripts: true
} // 額外的 Webview 選項(xiàng)
);
provider.resolveWebviewView(panel as unknown as vscode.WebviewView);
context.subscriptions.push(panel);
};
在這段代碼中,我們把頁面信息維護(hù)在ViewProvider這個(gè)類上。在這個(gè)類上,我們要實(shí)現(xiàn)頁面的渲染和更新。
頁面的渲染機(jī)制可以借用React 框架的 render(state) 思想,這個(gè)思想基于函數(shù)式編程的原則,其核心是將UI視為狀態(tài)的函數(shù),UI的每一次更新可以看作是一個(gè)狀態(tài)轉(zhuǎn)換的結(jié)果。
本插件的頁面構(gòu)成比較簡單,為了方便,可以直接使用原生JS和HTML開發(fā)。頁面的模塊主要分為以下4個(gè)部分:
整個(gè)數(shù)據(jù)驅(qū)動(dòng)式的頁面渲染如下所示:
<body>
${generateMainDiv(this.colorInfos)}
</body>
首先,我們定義colorInfos狀態(tài),這個(gè)變量存儲(chǔ)了當(dāng)前工作區(qū)所有顏色信息,包括該顏色的所在文件的位置和色值,TS定義如下所示:
export type ColorItem={
/** 顏色值起始位置 */
start: number;
/** 顏色值結(jié)束位置 */
end: number;
/** 顏色值 */
color: string;
/** 顏色值所在的文件路徑 */
file: string;
};
”顏色網(wǎng)格“是我們整個(gè)頁面主要的功能模塊,所以我們重點(diǎn)介紹這個(gè)功能的渲染函數(shù),根據(jù)colorInfos,一個(gè)能根據(jù)這個(gè)狀態(tài)生成HTML的函數(shù)可以簡化成這樣:
function generateMainDiv(colors) {
return colors.map(info=> `<div style="color: ${info.color}" data-colorItem="${encodeURIComponent(
JSON.stringify(item)
)}">${info.color}</div>`).join('');
}
其中自定義屬性data-colorItem存儲(chǔ)了整個(gè)顏色塊的所有信息。
把html元素賦值給WebView的html屬性,就可以實(shí)現(xiàn)頁面的掛載。
this._view.webview.html=this._getHtmlForWebview(this._view.webview);
function _getHtmlForWebview(webview: vscode.Webview) {
// Use a nonce to only allow specific scripts to be run
const nonce=getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Use a content security policy to only allow loading images from https or from our extension directory, and only allow scripts that have a specific nonce. -->
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your View</title>
</head>
<body>
${generateMainDiv(this.colorInfos)}
</body>
</html>`;
}
上面描述的數(shù)據(jù)驅(qū)動(dòng)式框架比較簡單,還沒有涉及到本項(xiàng)目的難點(diǎn)實(shí)現(xiàn),如果構(gòu)造colorInfos數(shù)據(jù),是本項(xiàng)目的難點(diǎn)之一,本節(jié)主要講這塊內(nèi)容。
在項(xiàng)目開發(fā)中,比較常見的顏色格式分為RGB, Hex, HSL和顏色關(guān)鍵字(Named Colors)這幾種。下面我們來分析這幾種顏色在CSS中的語法。
從MDN官網(wǎng)發(fā)現(xiàn)rgb()的寫法分為絕對(duì)和相對(duì)格式,我們平時(shí)熟悉的寫法是這樣的:rgb(x, y, z),其中x、y、z是從0到255的整數(shù),屬于絕對(duì)格式的一種。
為了讓項(xiàng)目能盡快先落地,我們此處只分析“絕對(duì)格式”的場景。絕對(duì)格式的寫法如下:
rgb(R G B[ / A])
其中R G B的值可以為0-255的整數(shù),或者0%-100%的百分比;A的值為0到1(或者0%-100%),表示顏色的透明度信息。如果有A值時(shí),需要使用 / 。
我們經(jīng)常見到的一種寫法是R G B通過逗號(hào)隔開,這種寫法其實(shí)是一種過時(shí)的寫法,但是考慮到大部分人都在用,匹配CSS RGB顏色的時(shí)候也應(yīng)該考慮到。rgba()語法也是一種過時(shí)的寫法,同樣本次也會(huì)考慮這種顏色格式的匹配。
CSS hsl() 的語法和rgb()是一致的,這里不在贅述,需要請(qǐng)移至MDN官網(wǎng)查看。
16進(jìn)制Hex的色值寫法分為以下幾種:
#RGB // The three-value syntax
#RGBA // The four-value syntax
#RRGGBB // The six-value syntax
#RRGGBBAA // The eight-value syntax
其中R G B的值為0到ff。
在CSS中,一些常用顏色可以使用預(yù)定義的關(guān)鍵字來表示,例:red、blue、green等,這些就是顏色關(guān)鍵詞。完整的標(biāo)準(zhǔn)關(guān)鍵詞可以在MDN官網(wǎng)找到。
了解了顏色在項(xiàng)目中的多種寫法,下面考慮如何匹配代碼中的顏色。常見的方案分為兩種:
前者實(shí)現(xiàn)比較簡單且通用性大,因此本插件選擇通過正則語法,針對(duì)不同的顏色格式,定制不同的匹配策略。
編寫一個(gè)基本的正則表達(dá)式來匹配顏色代碼其實(shí)不難,但是如果想提高要求,確保寫出來的正則表達(dá)式既準(zhǔn)確又具有良好的防御性,能夠考慮到各種邊緣情況以及性能優(yōu)化,這并不容易。
為了實(shí)現(xiàn)這一點(diǎn),此處我借鑒了另外一個(gè)插件Color Highlight的實(shí)現(xiàn)。這個(gè)插件是我目前在使用的比較好用的插件,在開發(fā)自己的插件之前,我從沒想過它是如何實(shí)現(xiàn)的,但是我熟悉它的功能:在編寫代碼的時(shí)候,可以高亮顯示當(dāng)前當(dāng)前編輯器中的顏色格式。要實(shí)現(xiàn)的功能和我的有相似之處,所以了解這個(gè)插件的實(shí)現(xiàn)應(yīng)該對(duì)于完成自己的插件很有幫助。
事實(shí)確實(shí)是這樣的,Color Highlight插件給出了一系列針對(duì)不同顏色格式的匹配策略,如下圖所示。
基于它的實(shí)現(xiàn),下面分析了針對(duì)不同顏色格式的正則表達(dá)式解析。
const colorRegex=/((rgb|hsl)a?(\s*[\d]*.?[\d]+%?\s*(?<commaOrSpace>\s|,)\s*[\d]*.?[\d]+%?\s*\k<commaOrSpace>\s*[\d]*.?[\d]+%?(\s*(\k<commaOrSpace>|/)\s*[\d]*.?[\d]+%?)?\s*))/gi;
整個(gè)正則表達(dá)式是一個(gè)全局不區(qū)分大小寫的匹配(由結(jié)尾的 gi 標(biāo)志指定),用于在文本中查找所有匹配的顏色值。主要分為兩部分:格式名稱(值),其中格式名稱分為三種情況,如下圖所示,分別為rgb,hsl,rgba, hsla。后半部分主要是匹配它們的不同書寫方式,包含數(shù)字值、逗號(hào)或空格分割。具體解析如下:
收集MDN官網(wǎng)給出的顏色關(guān)鍵字,寫一個(gè)簡單的正則,下面是列舉了部分色值的正則匹配:
(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow)
const colorHex=/.?((?:#|\b0x)([a-f0-9]{6}([a-f0-9]{2})?|[a-f0-9]{3}([a-f0-9]{1})?))\b/gi;
這個(gè)正則表達(dá)式用來匹配 CSS 中的十六進(jìn)制顏色值,同時(shí)也匹配十六進(jìn)制顏色值的簡寫形式,并且考慮到可能的透明度值(RGBA格式)。下面逐部分解釋這個(gè)正則表達(dá)式:
了解了不同顏色格式的匹配規(guī)則后,顏色的獲取思路其實(shí)很簡單:遍歷每個(gè)文件,獲取每個(gè)文件的文本字符串,通過對(duì)應(yīng)的正則匹配策略去匹配。基本的代碼如下所示:
從產(chǎn)品的使用場景看來,本插件所關(guān)注的顏色格式比較簡單:一些基本的rgb, hex, hsl,單詞的顏色可以不考慮,因?yàn)橛貌簧?,能用上我都可以直接匹配了,因此我們只關(guān)注沒有語義、且常用的顏色格式。
最終,針對(duì)本插件,可以總結(jié)出下面三種策略:
this.strategies=[findColorFunctionsInText,findHexRGBA];
for (const file of files) {
try {
const document=await vscode.workspace.openTextDocument(file);
const instance=await this.findOrCreateInstance(document);
colorsInfos.push(await instance.getColorInfo());
} catch {
continue;
}
}
getColorInfo(document=this.document) {
const text=this.document.getText();
const version=this.document.version.toString();
const file=this.document.uri.fsPath; // file path
const result=await Promise.all(this.strategies.map((fn)=> fn(text)));
return resolveResult(result); // 顏色解析,根據(jù)colorInfos的數(shù)據(jù)格式進(jìn)行數(shù)據(jù)解析
}
顏色的更新場景主要有以下幾種情況:
針對(duì)這三種情況,在產(chǎn)品設(shè)計(jì)上,可以設(shè)置一個(gè)“刷新按鈕“按鈕,點(diǎn)擊該按鈕,拉取最新的顏色信息。本章節(jié)主要從消息通信和更新機(jī)制兩個(gè)角度討論本插件的實(shí)現(xiàn)。
在頁面上點(diǎn)擊按鈕,然后執(zhí)行對(duì)應(yīng)的事件,這點(diǎn)的實(shí)現(xiàn)涉及到VSCode插件中Extension 和 Webview 的通信,主要是通過postMessage和onDidReceiveMessage實(shí)現(xiàn)消息的發(fā)送與接收。
Extension 里通過vscode.postMessage發(fā)送消息:
// 刷新
refreshBtn.addEventListener('click', ()=> {
// 如果已經(jīng)在Loading, 無需發(fā)送message
if (refreshBtn.classList.contains('btn--loading')) {
return;
}
refreshBtn.classList.add('btn--loading');
vscode.postMessage({ command: 'refresh' });
});
webviewView.webview.onDidReceiveMessage((message)=> {
switch (message.command) {
case 'refresh':
const prom=()=> this.doUpdateWebView()
prom().finally(()=> {
webviewView.webview.postMessage({
command: 'refreshEnd'
});
});
break;
}
});
在Extension接受到需要更新的消息后,需要執(zhí)行對(duì)應(yīng)的更新機(jī)制,這個(gè)實(shí)現(xiàn)主要封裝在doUpdateWebView方法中。更新機(jī)制主要實(shí)現(xiàn)的就是更新colorInfos,并重新執(zhí)行渲染函數(shù)以更新UI。
為了讓插件的第一個(gè)版本快速上線,文件新增、刪除場景的更新我們可以重新掃描一下所有文件;文件編輯的場景容易定位具體文檔,所以可以按需更新。
下面給出了本項(xiàng)目的更新實(shí)現(xiàn),其中整個(gè)了頁面初始化的渲染,因?yàn)檫@個(gè)場景的邏輯和文件新增、刪除重復(fù)。
private async doUpdateWebView() {
try {
if (
this.type==='init' ||
this.type==='add' ||
this.type==='delete'
) {
await this.initDataView();
return Promise.resolve();
}
// 顏色變更:text change
// 收集變更的document,局部更新顏色視圖
for (let index=0; index < this.instanceMap.length; index++) {
const instance=this.instanceMap[index];
// 如果頁面更改了
if (instance.changed) {
const colorDocumentItem=await instance.getColorInfo();
this.colorMapArray[index]=colorDocumentItem;
// 恢復(fù)
instance.changed=false;
}
}
// 更新顏色信息
this.colorInfos=updateColorInfosByMap(this.colorMapArray);
// 更新視圖
this._view.webview.html=this._getHtmlForWebview(this._view.webview);
return Promise.resolve();
} catch {
return Promise.reject();
}
}
代碼示意圖如下所示:
并不是項(xiàng)目中所有文件都有顏色值,所以為了讓插件能夠有效地找到有用的色值,我們需要給插件增加文件類型配置項(xiàng),用來定義哪些文件應(yīng)該在文件掃描過程中包含或排除。
include 和 exclude 這兩個(gè)配置項(xiàng)在很多前端開發(fā)相關(guān)的工具和配置文件中非常常見,如 webpack.config文件、tsconfig文件、babel.config文件。為了降低插件使用者的學(xué)習(xí)曲線,本插件也選擇使用 include 和 exclude 來指定掃描的文件類型。
下面是本插件默認(rèn)的配置屬性。
"color-to-see.findFilesRules": {
"default": {
"include": [
"**/*.js",
"**/*.jsx",
"**/*.tsx",
"**/*.css",
"**/*.less",
"**/*.sass",
"**/*.html",
"**/*.vue"
],
"exclude": [
"**/node_modules/**",
"**/dist/**",
".git"
]
},
掃描的文件類型主要關(guān)注實(shí)際開發(fā)中包含色值定義的文件類型,比如樣式文件、HTML文件或者JS文件。排除不需要掃描或處理的文件夾,如node_modules,dist,.git文件等。include和exclude的值使用 Glob Pattern 語法來指定哪些文件被包括或排除。
在Extension中,這套配置的使用原理如下:
config=vscode.workspace.getConfiguration(EXTENSION_NAME);
const findFilesUsingConfig=async (config: Config)=> {
const { include, exclude }=config.findFilesRules;
const includePattern=`{${include.join(',')}}`;
const excludePattern=`{${exclude.join(',')}}`;
try {
const files=await vscode.workspace.findFiles(
includePattern,
excludePattern
);
return files;
} catch {
return [];
}
};
:Color to See - Visual Studio Marketplace
盡管插件的功能大致已經(jīng)實(shí)現(xiàn)了,但是本插件還是有一些局限性,以及后續(xù)可以優(yōu)化的地方
插件需要掃描整個(gè)工作區(qū)的所有文件來查找顏色值,盡管增加了文件類型限制少掃描一些文件,但是剩下的文件掃描還是會(huì)消耗大量的計(jì)算資源。
顏色展示必須等待文件全部掃描完,長時(shí)間的掃描和等待會(huì)影響用戶體驗(yàn)
實(shí)現(xiàn)異步掃描機(jī)制,一旦掃描到新的顏色值,就立即在UI中展示,而不是等待所有掃描完成。
顏色值跳轉(zhuǎn)功能的實(shí)用性其實(shí)比較低,而且在本插件中,如果一個(gè)顏色在多個(gè)地方出現(xiàn),我只會(huì)記錄第一個(gè)位置。因此,本插件的使用過程中,用戶應(yīng)該更加關(guān)注于顏色值本身,而不是其在代碼中的具體位置。
除此之外,顏色跳轉(zhuǎn)到具體某個(gè)文件后,當(dāng)前視圖的位置沒有滾動(dòng)到對(duì)應(yīng)的高度。
增加一個(gè)配置項(xiàng)讓用戶可以自行決定是否啟用顏色值跳轉(zhuǎn)功能。默認(rèn)關(guān)閉。
本文基于一個(gè)場景問題,介紹了VSCode插件的開發(fā)過程,總的來說,這個(gè)項(xiàng)目算是一次很有意思的獨(dú)立開發(fā)體驗(yàn)。在這個(gè)過程中,可以總結(jié)出以下幾個(gè)比較重要的點(diǎn):
作者:蘭燕平
來源-微信公眾號(hào):Goodme前端團(tuán)隊(duì)
出處:https://mp.weixin.qq.com/s/WGV70jVODC_IVmh7dM4Sag
TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML(超文本標(biāo)記語言)代碼的工具或應(yīng)用程序。它提供了一個(gè)直觀的界面,使用戶能夠輕松地編寫和設(shè)計(jì)網(wǎng)頁內(nèi)容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
參考文檔:https://www.cjavapy.com/article/3299/
Visual Studio Code(簡稱VS Code)是一款由微軟開發(fā)的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級(jí)的代碼編輯器,啟動(dòng)迅速,占用資源少。VS Code提供了豐富的擴(kuò)展和插件,可以根據(jù)需求安裝插件來增強(qiáng)編輯器功能。
1)安裝和配置
官網(wǎng)地址:Visual Studio Code - Code Editing. Redefined
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后,可以根據(jù)自己的喜好配置編輯器設(shè)置,如主題、字體等。
2)新建HTML文件
在 VS Code 安裝完成后,選擇" 文件(F)->新建文件(N) ",在新建的文件中輸入以下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
3)編輯HTML文件
在VS Code中,點(diǎn)擊左上角的"文件"菜單,選擇"打開文件",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來打開HTML文件。
在編輯器中可以直接修改HTML文件的內(nèi)容。VS Code會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來保存HTML文件。
4)插件推薦
HTML CSS Support:提供對(duì)HTML和CSS的支持,包括代碼片段、自動(dòng)補(bǔ)全等功能。
Live Server:啟動(dòng)一個(gè)本地開發(fā)服務(wù)器,實(shí)時(shí)預(yù)覽HTML頁面的效果。
Prettier:格式化HTML代碼,使代碼結(jié)構(gòu)更整潔。
Auto Close Tag:自動(dòng)閉合HTML標(biāo)簽,提高編碼效率。
Bracket Pair Colorizer:對(duì)成對(duì)的括號(hào)進(jìn)行著色,方便識(shí)別代碼塊。
Sublime Text是一款流行的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。
Sublime Text的界面非常簡潔,沒有多余的菜單和工具欄,更便于專注于代碼編輯。Sublime Text支持多種編程語言,包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強(qiáng)大的插件系統(tǒng),用戶可以根據(jù)需要安裝插件來擴(kuò)展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等,以滿足個(gè)性化需求。Sublime Text啟動(dòng)迅速,響應(yīng)快速,適合于快速編輯代碼。
1)安裝和配置
官網(wǎng)地址:Sublime Text - Text Editing, Done Right
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后,可以根據(jù)自己的喜好進(jìn)行編輯器設(shè)置,如字體、主題等。
2)新建HTML文件
在Sublime Text 安裝完成后,選擇" File->New File ",在新建的文件中輸入以下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
3)編輯HTML文件
在Sublime Text中,點(diǎn)擊左上角的"File"菜單,選擇"Open File",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來打開HTML文件。在編輯器中可以直接修改HTML文件的內(nèi)容。Sublime Text會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來保存HTML文件。
4)插件推薦
Emmet:提供HTML/CSS快速編寫和自動(dòng)完成功能,可以大大提高編碼效率。
Sublime Linter:對(duì)代碼進(jìn)行實(shí)時(shí)語法檢查,幫助發(fā)現(xiàn)潛在的錯(cuò)誤和警告。
Color Highlighter:對(duì)CSS中的顏色進(jìn)行高亮顯示,方便調(diào)試和修改樣式。
SideBarEnhancements:增強(qiáng)側(cè)邊欄功能,提供更多文件操作選項(xiàng)。
Dreamweaver是由Adobe公司開發(fā)的一款全球知名的網(wǎng)頁設(shè)計(jì)和開發(fā)工具。它為開發(fā)人員和設(shè)計(jì)師提供了一個(gè)可視化的界面,可以直觀地創(chuàng)建和編輯網(wǎng)頁內(nèi)容,同時(shí)也支持手動(dòng)編輯代碼。Dreamweaver提供可視化界面,可以直觀地拖拽和編輯網(wǎng)頁元素,無需手動(dòng)編寫代碼。除了可視化界面,Dreamweaver也支持手動(dòng)編輯代碼,適合于開發(fā)人員和設(shè)計(jì)師。Dreamweaver可在Windows和macOS等多個(gè)平臺(tái)上運(yùn)行。Dreamweaver集成了代碼編輯器、預(yù)覽窗口、文件管理器等功能,提供全面的開發(fā)環(huán)境。
1)安裝和配置
官網(wǎng)地址:Website design software | Adobe Dreamweaver
根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Dreamweaver。打開Dreamweaver后,,根據(jù)需要進(jìn)行編輯器設(shè)置,如界面語言、字體、代碼顏色等。
2)編輯HTML文件
在Dreamweaver中,點(diǎn)擊左上角的"File"菜單,選擇"New",然后選擇"HTML",即可新建一個(gè)空白的HTML文件。內(nèi)容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>
使用可視化界面,可以直接拖拽頁面元素、調(diào)整布局、插入圖片等。若需要手動(dòng)編輯HTML代碼,可以在下方的代碼編輯器中進(jìn)行修改。Dreamweaver會(huì)自動(dòng)提供代碼補(bǔ)全和語法高亮功能。在Dreamweaver中,可以實(shí)時(shí)預(yù)覽網(wǎng)頁效果,點(diǎn)擊右上角的"Live View"按鈕即可。
3)CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的編輯和預(yù)覽,可以幫助創(chuàng)建更豐富的網(wǎng)頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼,并實(shí)時(shí)查看效果。
4)網(wǎng)頁上傳和發(fā)布
Dreamweaver集成了FTP功能,可以直接將編輯好的網(wǎng)頁上傳到服務(wù)器。點(diǎn)擊"Site"菜單,選擇"Manage Sites",配置好站點(diǎn)設(shè)置,即可進(jìn)行上傳和發(fā)布。
5)Dreamweaver模板和庫
Dreamweaver提供模板和庫功能,可以保存和復(fù)用常用的網(wǎng)頁元素和樣式,提高開發(fā)效率。
參考文檔:https://www.cjavapy.com/article/3299/
軟為Visual Studio Code推出了WebTS(Web Template Studio)跨平臺(tái)擴(kuò)充套件,讓開發(fā)者簡單地就能創(chuàng)建全端網(wǎng)頁應(yīng)用程序項(xiàng)目。WebTS擴(kuò)充套件會(huì)以設(shè)定精靈,指引開發(fā)者創(chuàng)建網(wǎng)頁應(yīng)用程序,開發(fā)者可以在過程中選擇前端框架、后端框架、頁面或是云端服務(wù),WebTS會(huì)自動(dòng)產(chǎn)生樣板代碼以及說明文件。
WebTS擴(kuò)充套件使用TypeScript和React創(chuàng)建,開發(fā)者可以在前端選用Reon、Vue和Angular創(chuàng)建項(xiàng)目,而后端項(xiàng)目則可以選用Node.js和Flask。為了加速應(yīng)用程序創(chuàng)建,開發(fā)團(tuán)隊(duì)提供了幾個(gè)應(yīng)用程序頁面樣板,讓開發(fā)者為頁面添加常用的UI,除了可以留空外,還可選擇預(yù)先增加網(wǎng)格或列表等界面,開發(fā)者可以在添加這些UI之前先預(yù)覽,待確定網(wǎng)頁樣式后再加入。
微軟提到,該擴(kuò)充套件能產(chǎn)生格式良好且易讀的代碼,也提供最佳實(shí)踐代碼為開發(fā)者整合Azure云端服務(wù),目前支持Azure Cosmos DB以及App Service。所有WebTS擴(kuò)充套件產(chǎn)生的代碼,都會(huì)連結(jié)ReadMe.md文件提供手把手開發(fā)步驟引導(dǎo)。
開發(fā)者可以在Visual Studio市集中找到WebTS擴(kuò)充套件,除了安裝該套件外,用戶也需要在系統(tǒng)安裝Node.js以及Yarn。WebTS擴(kuò)充套件是一個(gè)開源項(xiàng)目,在GitHub釋出原始碼。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。