首頁 web前端 前端問答 webstorm不辨識es6怎麼辦

webstorm不辨識es6怎麼辦

Oct 17, 2022 pm 06:29 PM
javascript es6 webstorm

解決方法:1、依序點選導覽列的“File”-“Preferences”-“Languages & Frameworks”-“JavaScript”,將版本設定為“ECMAScript 6”即可。 2.執行「npm install -g babel」指令安裝Babel工具,開啟「File watchers」並點選「 」按鈕,在彈跳窗中設定Babel即可。

webstorm不辨識es6怎麼辦

本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

ECMAScript 6是JavaScript語言的下一代標準,已經在2015年6月正式發布了。 Mozilla公司將在這個標準的基礎上,推出JavaScript 2.0。
ES6的目標,是使得JavaScript語言可以用來編寫大型的複雜的應用程序,成為企業級開發語言。

我也想嘗試ES6有什麼新特性,於是開始了學習之路。

在webstorm寫下了這段程式碼,體驗一下ES6語法的便利,但是一大堆報錯

webstorm不辨識es6怎麼辦
各種語法錯誤

#解決方法

1、語法支援設定

 File > Preferences > Languages & Frameworks > JavaScript
登入後複製

這裡只要設定ECMAScript版本即可

webstorm不辨識es6怎麼辦

配置之後

webstorm不辨識es6怎麼辦

2、自動轉碼為ES5

file watcher + babel(ES6转码器)
登入後複製

你可能希望你寫的程式碼有更好的相容性,但目前的ES6肯定不是所有瀏覽器都支援的,所以我們要用到ES6轉碼器。
Babel是一個廣泛使用的ES6轉碼器,可以將ES6程式碼轉為ES5程式碼,從而在瀏覽器或其他環境中執行。這意味著,你可以用ES6的方式寫程序,又不用擔心現有環境是否支援。

而且你也希望每次修改程式碼時能自動轉碼,所以也要用到webstorm的file watcher(當然還有其他解)

  • npm install -g babel

  • Preferences > Tools > File watchers

  • 點選「 」按鈕

webstorm不辨識es6怎麼辦
#file watcher設定介面

File Type:設定此監聽器監聽的檔案類型,可以在Preferences > Editor > File types中配置

Scope:配置該監聽器的監聽範圍,可自訂新的範圍,也可以使用Preferences > Appearance & Behavior > Scopes中定義的範圍

Program:babel的安裝位置

Arguments:指令執行參數,請參閱Babel CLI

#Working directory:babel指令執行的位置,預設為檔案所在目錄

#這樣對檔案做修改會隨時產生編譯成ES5的檔案以及sourceMap檔案

webstorm不辨識es6怎麼辦
#後

【相關推薦:javascript影片教學程式設計影片webstorm教學

以上是webstorm不辨識es6怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

webstorm閃退怎麼解決 webstorm閃退怎麼解決 Apr 08, 2024 pm 02:24 PM

解決 WebStorm 閃退問題的步驟:檢查更新;重新啟動電腦;停用外掛程式;重設設定;清除快取;檢查防火牆和防毒軟體;重新安裝 WebStorm;聯絡支援團隊。

webstorm怎麼連接資料庫 webstorm怎麼連接資料庫 Apr 08, 2024 pm 03:42 PM

可透過以下步驟使用WebStorm 連線資料庫:1. 開啟資料庫工具視窗;2. 建立資料來源;3. 連線到資料來源;4. 查詢資料庫;5.瀏覽表與資料;6. 編輯資料庫物件;7.管理使用者和權限。

webstorm怎麼運行jsp項目 webstorm怎麼運行jsp項目 Apr 08, 2024 pm 03:39 PM

可以透過以下步驟在 WebStorm 中執行 JSP 專案:建立一個 Java Web 專案。配置項目,新增 Web 和 Java EE facet。在 "src/main/webapp" 目錄中建立 JSP 檔案。編寫 JSP 程式碼,包括 HTML、Java 和 JSP 標籤。部署並運行專案。在瀏覽器中輸入應用程式上下文根目錄以存取 JSP 頁面。

webstorm怎麼自動換行 webstorm怎麼自動換行 Apr 08, 2024 pm 03:48 PM

WebStorm 提供自動換行功能,可將程式碼分行提高可讀性。其規則包括:1. 分行長表達式和語句;2. 分行方法呼叫;3. 分行函數和類別定義。使用者可自訂設置,例如最大行長、縮排類型和快捷鍵。不過,自動換行可能不適用於單行註解或字串字面值,且會影響程式碼格式,建議在應用前仔細審查。

如何重啟webstorm 如何重啟webstorm Apr 08, 2024 pm 07:15 PM

若要重新啟動 WebStorm,請依照下列步驟操作:使用快速鍵:Windows/Linux:Ctrl + Shift + A,macOS:Cmd + Shift + A。在搜尋欄位中輸入“重新啟動”,然後選擇“重新啟動”。使用選單:點選「檔案」選單,選擇「重新載入」下的「重新啟動」。使用工作管理員:在工作管理員或強制退出應用程式視窗中,選擇 WebStorm 進程,然後點擊「重新啟動」或「重新啟動」。

webstorm和vscode哪個好用 webstorm和vscode哪個好用 Apr 08, 2024 pm 07:33 PM

對於專注於 Web 開發,追求深度功能的開發者,WebStorm 是更佳選擇;而重視可自訂性、輕量級和多語言支援的使用者則更適合 VSCode。

webstorm自動換行在哪 webstorm自動換行在哪 Apr 08, 2024 pm 08:09 PM

WebStorm 中可以透過下列步驟設定自動換行:勾選 "Wrap lines" 複選框並設定最大行寬。選擇自動換行規則:無、任意位置換行、關鍵字後換行。可選設定:保留手動換行、回車後自動換行。應用設定並關閉設定視窗。注意:此設定適用於所有文件類型,特定文件類型可單獨設定。

webstorm怎麼登入 webstorm怎麼登入 Apr 08, 2024 pm 04:45 PM

登入 WebStorm 的步驟:1. 開啟 WebStorm;2. 選擇 GitHub 或 JetBrains 帳戶登入;3. 輸入憑證;4. 授權存取帳戶;5. 完成登入。

See all articles