整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在進行項目開發的時候，可能會遇到“想找某個色值”的場景，因為顏色值一般是數字類型，沒有語義，不好全局搜索。所以就希望有一個工具，能夠快速展示工作目錄下的所有顏色，方便取值。
由于是在編寫代碼階段，所以這個工具最方便的其實是編輯器的插件。我使用VSCode插件，所以先來試試開發一個VSCode插件。
在正式開發之前，先來給這個插件取個好名字，color, see, 一想到這兩個單詞，我腦海里直接蹦出了“給你點顏色看看”的中文式表達”give you color to see”，看起來Color to See 是個好名字。
在開發之前，先來想想我們的”產品“長什么樣子，要實現什么功能。
插件要實現的目標是能夠快速找到某個色值，所以我們要將顏色可視化，色值是最終我們希望能拿到的，所以需要將項目中所有的顏色收集起來，統一展示（包含可視化、色值）。
具體功能清單如下：
UI設計如下：
WebView可以用來創建自定義的視圖，可以看成是VSCode內部的 Iframe 容器，可以渲染任何HTML, 通過消息傳遞實現通信，所以具備非常強大的頁面渲染和交互能力。
VSCode內部提供了三個API可以創建WebView:
創建一個編輯器面板。即時的，關閉編輯器就銷毀了，主要用于那些不需要持久化狀態（在關閉后不需要恢復）的場景，示例代碼如下：
const panel=vscode.window.createWebviewPanel(
'webviewId', // Webview 的標識符
'My Webview', // 面板標題
vscode.ViewColumn.One, // 面板顯示在哪個編輯器列中
{ enableScripts: true } // 額外的 Webview 選項
);
panel.webview.html="<html><body><h1>Hello, Webview!</h1></body></html>";
定義如何序列化和反序列化 WebView 面板的狀態，這樣即使在 VSCode 重啟后，這個 WebView 面板的狀態也可以被恢復。所以這種WebView，對于那些需要保留用戶狀態或信息的面板來說非常有用。
class MyWebviewPanelSerializer implements vscode.WebviewPanelSerializer {
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
// 重新設置 Webview 的內容等
webviewPanel.webview.html="<html><body><h1>Restored Webview</h1></body></html>";
}
}
context.subscriptions.push(vscode.window.registerWebviewPanelSerializer('webviewId', new MyWebviewPanelSerializer()));
創建一個編輯器面板。持久的視圖，常駐在側邊欄（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稿的后臺開發，使用次數不會很頻繁，所以插件的視圖不需要持久，所以可以選擇用createWebviewPanel創建一個編輯器面板來承載界面。
通過官方文檔給的腳手架命令，開始初始化我們的插件項目。目錄結構如下：
├─ .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文件，這是我們項目的入口文件，是Webpack把src/extentions.ts作為入口文件編譯過來的
看package.json的script配置，發現可以運行yarn watch命令進行熱更新，也就是實時把改動的代碼編譯成可執行的JS文件。
運行完yarn watch后，通過按“F5”或者“運行->啟動調試”，運行我們的插件，這時候VSCode會打開一個新的窗口，快捷鍵ctrl + shift + p輸入hello world
最后，點擊執行這個命令，可以看到右下角彈出了歡迎標語。如下圖所示：
如果修改了代碼，可以F5刷新debug窗口，也可以在debug窗口上使用快捷鍵command + R刷新，和在瀏覽器刷新網頁一樣。
以上就是 VSCode 插件開發起步的過程。
在package.json文件的commands屬性上新增extension.colorToSee，這個命令是使用我們插件的起點，所以務必寫個好title，為了讓插件國際化，我的title設置為"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"
}
],
這個命令的執行回調函數在extension.ts文件上，重點代碼如下：
vscode.commands.registerCommand(COMMAND_NAME, ()=> {
registerWebviewViewProvider(context);
})
在這串代碼中，我們把具體的實現邏輯封裝在registerWebviewViewProvider方法上，接下來我們可以只關注這個方法的實現。
使用WebView API createWebviewPanel來創建一個自定義的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 的標識符
PANEL_TITLE, // 面板標題
vscode.ViewColumn.One, // 面板顯示在哪個編輯器列中
{
enableScripts: true
} // 額外的 Webview 選項
);
provider.resolveWebviewView(panel as unknown as vscode.WebviewView);
context.subscriptions.push(panel);
};
在這段代碼中，我們把頁面信息維護在ViewProvider這個類上。在這個類上，我們要實現頁面的渲染和更新。
頁面的渲染機制可以借用React 框架的 render(state) 思想，這個思想基于函數式編程的原則，其核心是將UI視為狀態的函數，UI的每一次更新可以看作是一個狀態轉換的結果。
本插件的頁面構成比較簡單，為了方便，可以直接使用原生JS和HTML開發。頁面的模塊主要分為以下4個部分：
整個數據驅動式的頁面渲染如下所示：
<body>
${generateMainDiv(this.colorInfos)}
</body>
首先，我們定義colorInfos狀態，這個變量存儲了當前工作區所有顏色信息，包括該顏色的所在文件的位置和色值，TS定義如下所示：
export type ColorItem={
/** 顏色值起始位置 */
start: number;
/** 顏色值結束位置 */
end: number;
/** 顏色值 */
color: string;
/** 顏色值所在的文件路徑 */
file: string;
};
”顏色網格“是我們整個頁面主要的功能模塊，所以我們重點介紹這個功能的渲染函數，根據colorInfos，一個能根據這個狀態生成HTML的函數可以簡化成這樣：
function generateMainDiv(colors) {
return colors.map(info=> `<div style="color: ${info.color}" data-colorItem="${encodeURIComponent(
JSON.stringify(item)
)}">${info.color}</div>`).join('');
}
其中自定義屬性data-colorItem存儲了整個顏色塊的所有信息。
把html元素賦值給WebView的html屬性，就可以實現頁面的掛載。
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>`;
}
上面描述的數據驅動式框架比較簡單，還沒有涉及到本項目的難點實現，如果構造colorInfos數據，是本項目的難點之一，本節主要講這塊內容。
在項目開發中，比較常見的顏色格式分為RGB, Hex, HSL和顏色關鍵字（Named Colors）這幾種。下面我們來分析這幾種顏色在CSS中的語法。
從MDN官網發現rgb()的寫法分為絕對和相對格式，我們平時熟悉的寫法是這樣的：rgb(x, y, z)，其中x、y、z是從0到255的整數，屬于絕對格式的一種。
為了讓項目能盡快先落地，我們此處只分析“絕對格式”的場景。絕對格式的寫法如下：
rgb(R G B[ / A])
其中R G B的值可以為0-255的整數，或者0%-100%的百分比；A的值為0到1（或者0%-100%），表示顏色的透明度信息。如果有A值時，需要使用 / 。
我們經常見到的一種寫法是R G B通過逗號隔開，這種寫法其實是一種過時的寫法，但是考慮到大部分人都在用，匹配CSS RGB顏色的時候也應該考慮到。rgba()語法也是一種過時的寫法，同樣本次也會考慮這種顏色格式的匹配。
CSS hsl() 的語法和rgb()是一致的，這里不在贅述，需要請移至MDN官網查看。
16進制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中，一些常用顏色可以使用預定義的關鍵字來表示，例：red、blue、green等，這些就是顏色關鍵詞。完整的標準關鍵詞可以在MDN官網找到。
了解了顏色在項目中的多種寫法，下面考慮如何匹配代碼中的顏色。常見的方案分為兩種：
前者實現比較簡單且通用性大，因此本插件選擇通過正則語法，針對不同的顏色格式，定制不同的匹配策略。
編寫一個基本的正則表達式來匹配顏色代碼其實不難，但是如果想提高要求，確保寫出來的正則表達式既準確又具有良好的防御性，能夠考慮到各種邊緣情況以及性能優化，這并不容易。
為了實現這一點，此處我借鑒了另外一個插件Color Highlight的實現。這個插件是我目前在使用的比較好用的插件，在開發自己的插件之前，我從沒想過它是如何實現的，但是我熟悉它的功能：在編寫代碼的時候，可以高亮顯示當前當前編輯器中的顏色格式。要實現的功能和我的有相似之處，所以了解這個插件的實現應該對于完成自己的插件很有幫助。
事實確實是這樣的，Color Highlight插件給出了一系列針對不同顏色格式的匹配策略，如下圖所示。
基于它的實現，下面分析了針對不同顏色格式的正則表達式解析。
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;
整個正則表達式是一個全局不區分大小寫的匹配（由結尾的 gi 標志指定），用于在文本中查找所有匹配的顏色值。主要分為兩部分：格式名稱(值)，其中格式名稱分為三種情況，如下圖所示，分別為rgb,hsl,rgba, hsla。后半部分主要是匹配它們的不同書寫方式，包含數字值、逗號或空格分割。具體解析如下：
收集MDN官網給出的顏色關鍵字，寫一個簡單的正則，下面是列舉了部分色值的正則匹配：
(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;
這個正則表達式用來匹配 CSS 中的十六進制顏色值，同時也匹配十六進制顏色值的簡寫形式，并且考慮到可能的透明度值（RGBA格式）。下面逐部分解釋這個正則表達式：
了解了不同顏色格式的匹配規則后，顏色的獲取思路其實很簡單：遍歷每個文件，獲取每個文件的文本字符串，通過對應的正則匹配策略去匹配。基本的代碼如下所示：
從產品的使用場景看來，本插件所關注的顏色格式比較簡單：一些基本的rgb, hex, hsl，單詞的顏色可以不考慮，因為用不上，能用上我都可以直接匹配了，因此我們只關注沒有語義、且常用的顏色格式。
最終，針對本插件，可以總結出下面三種策略：
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); // 顏色解析，根據colorInfos的數據格式進行數據解析
}
顏色的更新場景主要有以下幾種情況：
針對這三種情況，在產品設計上，可以設置一個“刷新按鈕“按鈕，點擊該按鈕，拉取最新的顏色信息。本章節主要從消息通信和更新機制兩個角度討論本插件的實現。
在頁面上點擊按鈕，然后執行對應的事件，這點的實現涉及到VSCode插件中Extension 和 Webview 的通信，主要是通過postMessage和onDidReceiveMessage實現消息的發送與接收。
Extension 里通過vscode.postMessage發送消息:
// 刷新
refreshBtn.addEventListener('click', ()=> {
// 如果已經在Loading, 無需發送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接受到需要更新的消息后，需要執行對應的更新機制，這個實現主要封裝在doUpdateWebView方法中。更新機制主要實現的就是更新colorInfos，并重新執行渲染函數以更新UI。
為了讓插件的第一個版本快速上線，文件新增、刪除場景的更新我們可以重新掃描一下所有文件；文件編輯的場景容易定位具體文檔，所以可以按需更新。
下面給出了本項目的更新實現，其中整個了頁面初始化的渲染，因為這個場景的邏輯和文件新增、刪除重復。
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;
// 恢復
instance.changed=false;
}
}
// 更新顏色信息
this.colorInfos=updateColorInfosByMap(this.colorMapArray);
// 更新視圖
this._view.webview.html=this._getHtmlForWebview(this._view.webview);
return Promise.resolve();
} catch {
return Promise.reject();
}
}
代碼示意圖如下所示：
并不是項目中所有文件都有顏色值，所以為了讓插件能夠有效地找到有用的色值，我們需要給插件增加文件類型配置項，用來定義哪些文件應該在文件掃描過程中包含或排除。
include 和 exclude 這兩個配置項在很多前端開發相關的工具和配置文件中非常常見，如 webpack.config文件、tsconfig文件、babel.config文件。為了降低插件使用者的學習曲線，本插件也選擇使用 include 和 exclude 來指定掃描的文件類型。
下面是本插件默認的配置屬性。
"color-to-see.findFilesRules": {
"default": {
"include": [
"**/*.js",
"**/*.jsx",
"**/*.tsx",
"**/*.css",
"**/*.less",
"**/*.sass",
"**/*.html",
"**/*.vue"
],
"exclude": [
"**/node_modules/**",
"**/dist/**",
".git"
]
},
掃描的文件類型主要關注實際開發中包含色值定義的文件類型，比如樣式文件、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
盡管插件的功能大致已經實現了，但是本插件還是有一些局限性，以及后續可以優化的地方
插件需要掃描整個工作區的所有文件來查找顏色值，盡管增加了文件類型限制少掃描一些文件，但是剩下的文件掃描還是會消耗大量的計算資源。
顏色展示必須等待文件全部掃描完，長時間的掃描和等待會影響用戶體驗
實現異步掃描機制，一旦掃描到新的顏色值，就立即在UI中展示，而不是等待所有掃描完成。
顏色值跳轉功能的實用性其實比較低，而且在本插件中，如果一個顏色在多個地方出現，我只會記錄第一個位置。因此，本插件的使用過程中，用戶應該更加關注于顏色值本身，而不是其在代碼中的具體位置。
除此之外，顏色跳轉到具體某個文件后，當前視圖的位置沒有滾動到對應的高度。
增加一個配置項讓用戶可以自行決定是否啟用顏色值跳轉功能。默認關閉。
本文基于一個場景問題，介紹了VSCode插件的開發過程，總的來說，這個項目算是一次很有意思的獨立開發體驗。在這個過程中，可以總結出以下幾個比較重要的點：
作者:蘭燕平
來源-微信公眾號:Goodme前端團隊
出處:https://mp.weixin.qq.com/s/WGV70jVODC_IVmh7dM4Sag
TML編輯器是一種用于創建、編輯和預覽HTML（超文本標記語言）代碼的工具或應用程序。它提供了一個直觀的界面，使用戶能夠輕松地編寫和設計網頁內容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
參考文檔：https://www.cjavapy.com/article/3299/
Visual Studio Code（簡稱VS Code）是一款由微軟開發的跨平臺源代碼編輯器，支持Windows、macOS和Linux等多種操作系統。它被廣泛用于Web開發，包括編輯HTML、CSS、JavaScript等前端技術。VS Code是一款輕量級的代碼編輯器，啟動迅速，占用資源少。VS Code提供了豐富的擴展和插件，可以根據需求安裝插件來增強編輯器功能。
1）安裝和配置
官網地址：Visual Studio Code - Code Editing. Redefined
根據操作系統下載并安裝相應版本的VS Code。打開VS Code后，可以根據自己的喜好配置編輯器設置，如主題、字體等。
2）新建HTML文件
在 VS Code 安裝完成后，選擇" 文件(F)->新建文件(N) "，在新建的文件中輸入以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>3）編輯HTML文件
在VS Code中，點擊左上角的"文件"菜單，選擇"打開文件"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。
在編輯器中可以直接修改HTML文件的內容。VS Code會自動識別HTML標記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。
4）插件推薦
HTML CSS Support：提供對HTML和CSS的支持，包括代碼片段、自動補全等功能。
Live Server：啟動一個本地開發服務器，實時預覽HTML頁面的效果。
Prettier：格式化HTML代碼，使代碼結構更整潔。
Auto Close Tag：自動閉合HTML標簽，提高編碼效率。
Bracket Pair Colorizer：對成對的括號進行著色，方便識別代碼塊。
Sublime Text是一款流行的跨平臺源代碼編輯器，支持Windows、macOS和Linux等多種操作系統。它被廣泛用于Web開發，包括編輯HTML、CSS、JavaScript等前端技術。
Sublime Text的界面非常簡潔，沒有多余的菜單和工具欄，更便于專注于代碼編輯。Sublime Text支持多種編程語言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強大的插件系統，用戶可以根據需要安裝插件來擴展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等，以滿足個性化需求。Sublime Text啟動迅速，響應快速，適合于快速編輯代碼。
1）安裝和配置
官網地址：Sublime Text - Text Editing, Done Right
根據操作系統下載并安裝相應版本的Sublime Text。打開Sublime Text后，可以根據自己的喜好進行編輯器設置，如字體、主題等。
2）新建HTML文件
在Sublime Text 安裝完成后，選擇" File->New File "，在新建的文件中輸入以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>3）編輯HTML文件
在Sublime Text中，點擊左上角的"File"菜單，選擇"Open File"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。在編輯器中可以直接修改HTML文件的內容。Sublime Text會自動識別HTML標記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。
4）插件推薦
Emmet：提供HTML/CSS快速編寫和自動完成功能，可以大大提高編碼效率。
Sublime Linter：對代碼進行實時語法檢查，幫助發現潛在的錯誤和警告。
Color Highlighter：對CSS中的顏色進行高亮顯示，方便調試和修改樣式。
SideBarEnhancements：增強側邊欄功能，提供更多文件操作選項。
Dreamweaver是由Adobe公司開發的一款全球知名的網頁設計和開發工具。它為開發人員和設計師提供了一個可視化的界面，可以直觀地創建和編輯網頁內容，同時也支持手動編輯代碼。Dreamweaver提供可視化界面，可以直觀地拖拽和編輯網頁元素，無需手動編寫代碼。除了可視化界面，Dreamweaver也支持手動編輯代碼，適合于開發人員和設計師。Dreamweaver可在Windows和macOS等多個平臺上運行。Dreamweaver集成了代碼編輯器、預覽窗口、文件管理器等功能，提供全面的開發環境。
1）安裝和配置
官網地址：Website design software | Adobe Dreamweaver
根據操作系統下載并安裝相應版本的Dreamweaver。打開Dreamweaver后，，根據需要進行編輯器設置，如界面語言、字體、代碼顏色等。
2）編輯HTML文件
在Dreamweaver中，點擊左上角的"File"菜單，選擇"New"，然后選擇"HTML"，即可新建一個空白的HTML文件。內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>使用可視化界面，可以直接拖拽頁面元素、調整布局、插入圖片等。若需要手動編輯HTML代碼，可以在下方的代碼編輯器中進行修改。Dreamweaver會自動提供代碼補全和語法高亮功能。在Dreamweaver中，可以實時預覽網頁效果，點擊右上角的"Live View"按鈕即可。
3）CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的編輯和預覽，可以幫助創建更豐富的網頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼，并實時查看效果。
4）網頁上傳和發布
Dreamweaver集成了FTP功能，可以直接將編輯好的網頁上傳到服務器。點擊"Site"菜單，選擇"Manage Sites"，配置好站點設置，即可進行上傳和發布。
5）Dreamweaver模板和庫
Dreamweaver提供模板和庫功能，可以保存和復用常用的網頁元素和樣式，提高開發效率。
參考文檔：https://www.cjavapy.com/article/3299/
軟為Visual Studio Code推出了WebTS（Web Template Studio）跨平臺擴充套件，讓開發者簡單地就能創建全端網頁應用程序項目。WebTS擴充套件會以設定精靈，指引開發者創建網頁應用程序，開發者可以在過程中選擇前端框架、后端框架、頁面或是云端服務，WebTS會自動產生樣板代碼以及說明文件。
WebTS擴充套件使用TypeScript和React創建，開發者可以在前端選用Reon、Vue和Angular創建項目，而后端項目則可以選用Node.js和Flask。為了加速應用程序創建，開發團隊提供了幾個應用程序頁面樣板，讓開發者為頁面添加常用的UI，除了可以留空外，還可選擇預先增加網格或列表等界面，開發者可以在添加這些UI之前先預覽，待確定網頁樣式后再加入。
微軟提到，該擴充套件能產生格式良好且易讀的代碼，也提供最佳實踐代碼為開發者整合Azure云端服務，目前支持Azure Cosmos DB以及App Service。所有WebTS擴充套件產生的代碼，都會連結ReadMe.md文件提供手把手開發步驟引導。
開發者可以在Visual Studio市集中找到WebTS擴充套件，除了安裝該套件外，用戶也需要在系統安裝Node.js以及Yarn。WebTS擴充套件是一個開源項目，在GitHub釋出原始碼。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
