由于中有高級(jí)語(yǔ)法高亮顯示、智能內(nèi)容輔助和準(zhǔn)確驗(yàn)證等特性，進(jìn)行JavaScript編碼不再是一項(xiàng)繁瑣的任務(wù)。

MyEclipse技術(shù)交流群：742336981 歡迎一起進(jìn)群討論

JavaScript項(xiàng)目

在 2021及以后的版本中，大多數(shù)JavaScript支持都是開(kāi)箱即用的JavaScript源代碼——不需要特殊的JavaScript Eclipse項(xiàng)目或JavaScript facet。但是官方建議使用jsconfig.json文件來(lái)指定項(xiàng)目上下文，這使得在項(xiàng)目中跨多個(gè)源文件進(jìn)行高級(jí)JavaScript分析，來(lái)增強(qiáng)智能感知、驗(yàn)證、導(dǎo)航等功能。

MyEclipse可以幫助您創(chuàng)建這個(gè)文件，還可以根據(jù)需要對(duì)其進(jìn)行進(jìn)一步調(diào)整。

編輯JavaScript源代碼

智能感知

當(dāng)輸入JavaScript文件時(shí)，使用內(nèi)容輔助快捷鍵(默認(rèn)為Ctrl/Cmd + Space)來(lái)彈出一個(gè)提案列表，在輸入觸發(fā)字符后也會(huì)自動(dòng)顯示建議。如果可用，JSDoc也將顯示在彈出窗口中。

JSON

智能感知也可用于JSON文件，當(dāng)編輯普通文件時(shí)，您可以獲得內(nèi)容輔助和開(kāi)箱即用的文檔；在編輯不太常見(jiàn)的文件時(shí)，您還可以通過(guò)向JSON中添加“$schema”屬性來(lái)鏈接到模式以獲得類似的支持。

自動(dòng)導(dǎo)入

使用模塊時(shí)，內(nèi)容輔助會(huì)建議在項(xiàng)目中找到的導(dǎo)出符號(hào)的名稱，使用此建議也會(huì)添加導(dǎo)入。

驗(yàn)證與檢驗(yàn)

只有當(dāng)前在編輯器中打開(kāi)的文件才會(huì)被驗(yàn)證，您將在編輯器的標(biāo)尺區(qū)域以及Problems/ markers視圖中看到錯(cuò)誤、警告和信息標(biāo)記。

注意：對(duì)于高級(jí)JavaScript驗(yàn)證，要么確保您的項(xiàng)目有一個(gè)jsconfig.json文件，其中checkJS屬性設(shè)置為true；要么在文件頂部添加“//@ts-check”注釋。

ESLint

ESLint支持是內(nèi)置的，但是您必須在項(xiàng)目的根目錄下有一個(gè)ESLint配置文件，并且在項(xiàng)目中安裝ESLint——node_modules必須包括ESLint，以及正在使用的任何ESLint插件。例如，在檢查ES2020代碼時(shí)，您需要使用Babel解析器。

快速修復(fù)

對(duì)于一些警告和錯(cuò)誤，包括限制問(wèn)題，可以使用快速修復(fù)程序。只需將鼠標(biāo)懸停在彎曲的線條上，就可以看到幾個(gè)可能的修復(fù)鏈接。

代碼分析和重構(gòu)

使用Find References操作在當(dāng)前文件或整個(gè)項(xiàng)目中查找對(duì)JavaScript結(jié)構(gòu)的引用。

重命名重構(gòu)允許您在整個(gè)項(xiàng)目中重命名這些構(gòu)造。

導(dǎo)航

Outline視圖

Outline視圖描述了JavaScript編輯器的函數(shù)和變量的結(jié)構(gòu)化視圖，讓您快速了解代碼是如何結(jié)構(gòu)化的，單擊Outline中的一個(gè)元素來(lái)跳轉(zhuǎn)到代碼中的該部分。

如果視圖在當(dāng)前透視圖中不可見(jiàn)，請(qǐng)從工具欄中選擇Window>Show view >Other>General>Outline。

快速概述

在編輯JavaScript文件時(shí)按Ctrl+O打開(kāi)Quick Outline，以便在代碼中輕松導(dǎo)航。

用Chrome或Firefox調(diào)試JavaScript

通過(guò)雙擊標(biāo)尺區(qū)域在源代碼中放置斷點(diǎn)，開(kāi)發(fā)者可以在JavaScript文件中放置斷點(diǎn)，也可以在HTML/JSP文件中嵌入JavaScript。

要?jiǎng)?chuàng)建一個(gè)新的調(diào)試配置：

1. 從Debug下拉菜單中，選擇Debug Configurations。
2. 創(chuàng)建一個(gè)新的Chrome調(diào)試/啟動(dòng)Firefox Debugger配置。
3. 在URL字段中，粘貼應(yīng)用程序的URL。
4. 在工作目錄字段中，指定項(xiàng)目根目錄的文件系統(tǒng)路徑。
5. 單擊Debug來(lái)啟動(dòng)調(diào)試會(huì)話。

Chrome調(diào)試注意事項(xiàng)：如果Chrome還沒(méi)有運(yùn)行，將啟動(dòng)Chrome在調(diào)試模式，如果Chrome不是在調(diào)試模式下運(yùn)行，點(diǎn)擊調(diào)試將重用正在運(yùn)行的Chrome實(shí)例，但JavaScript調(diào)試將不起作用。要么使用——remote-debugging-port=9222開(kāi)關(guān)在調(diào)試模式下啟動(dòng)Chrome，要么關(guān)閉Chrome，以便它可以使用正確的設(shè)置自動(dòng)啟動(dòng)。

附錄A: jsconfig.json

在JavaScript項(xiàng)目的根目錄中創(chuàng)建這個(gè)文件，該配置文件可用于指定要包含在項(xiàng)目JavaScript上下文中的文件，以及編譯和解析選項(xiàng)。

示例jsconfig.json

{
"compilerOptions": {
"disableSizeLimit": true,
"allowJs": true,
"module": "commonjs",
"target": "es6",
"checkJs": true
}
,
"exclude": ["node_modules"]
}