快捷導(dǎo)航

vscode eslint插件報(bào)錯(cuò)Parsing error: Invalid ecmaVersion問(wèn)題

更新時(shí)間：2023年10月20日 15:26:49 作者：HHHHy2019

這篇文章主要介紹了vscode eslint插件報(bào)錯(cuò)Parsing error: Invalid ecmaVersion問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vscode eslint插件報(bào)錯(cuò)Parsing error: Invalid ecmaVersion

問(wèn)題描述

vscode 打開(kāi)項(xiàng)目每個(gè)頁(yè)面都會(huì)首行第一個(gè)單詞帶有紅色波浪線～，顯示為Parsing error: Invalid ecmaVersion.

解決方式(網(wǎng)絡(luò))

安裝最新版eslint

npm i -g eslint

vscode中eslint語(yǔ)法報(bào)錯(cuò)問(wèn)題

我們使用vue-cli創(chuàng)建項(xiàng)目，默認(rèn)會(huì)啟用eslint語(yǔ)法檢驗(yàn)，雖然是個(gè)好東西，可以讓我們的代碼格式非常的規(guī)范，但是他過(guò)于嚴(yán)格的語(yǔ)法規(guī)范，比如不能加分號(hào)，使用單引號(hào)，代碼結(jié)尾還有有一個(gè)空行等等過(guò)于嚴(yán)格的要求，讓代碼經(jīng)常報(bào)錯(cuò)，與修改一個(gè)空格，一個(gè)分號(hào)的事就大大降低了開(kāi)發(fā)效率，所以需要解除一些工具幫我們自動(dòng)按照esllint進(jìn)行代碼自動(dòng)規(guī)范化。

解決

我是使用了三個(gè)插件來(lái)實(shí)現(xiàn)保存自動(dòng)進(jìn)行代碼規(guī)范化的功能，非常的方便。

步驟：

1）首先確保自己的vscode中安裝了eslint、vetur、prettier這三個(gè)插件

2）在配置文件（setting.json）中進(jìn)行配置

按ctrl+shift+p打開(kāi)搜索setting，打開(kāi)配置文件

在配置文件中添加如下配置

// 在保存的時(shí)候進(jìn)行格式化
  "editor.formatOnSave": true,

3）在項(xiàng)目根目錄下新建.prettierrc配置文件，對(duì)prettier進(jìn)行設(shè)置，配置如下：

因?yàn)閜rettier有個(gè)很惡心的功能，就是會(huì)將所有的單引號(hào)變?yōu)殡p引號(hào)，所有語(yǔ)句加上分號(hào)，這個(gè)明顯不符合eslint的語(yǔ)法，所以需要我們進(jìn)行配置

{
	//使用單引號(hào)
  "singleQuote": true,
  //不添加分號(hào)
  "semi": false
}

4）然而這樣配置完還是會(huì)報(bào)錯(cuò)，eslint要求我們?cè)趂unction和（）之間加上一個(gè)空格，但是這樣并不好看，所以我們可以在.eslintrc.js文件中進(jìn)行配置，禁用該規(guī)則，配置如下：

 rules: {
    // 禁用方法（）前有一個(gè)空格
    'space-before-function-paren': 0,
    //關(guān)閉定義未使用的錯(cuò)誤
   "no-unused-vars": "off"
   //關(guān)閉縮進(jìn)檢測(cè)
	'indent': 'off'
  }

大功告成了~