vscode eslint插件報(bào)錯(cuò)Parsing error: Invalid ecmaVersion問題
vscode eslint插件報(bào)錯(cuò)Parsing error: Invalid ecmaVersion
問題描述
vscode 打開項(xiàng)目每個(gè)頁(yè)面都會(huì)首行第一個(gè)單詞帶有紅色波浪線～，顯示為Parsing error: Invalid ecmaVersion.
解決方式(網(wǎng)絡(luò))
安裝最新版eslint
npm i -g eslint
vscode中eslint語(yǔ)法報(bào)錯(cuò)問題
我們使用vue-cli創(chuàng)建項(xiàng)目，默認(rèn)會(huì)啟用eslint語(yǔ)法檢驗(yàn)，雖然是個(gè)好東西，可以讓我們的代碼格式非常的規(guī)范，但是他過于嚴(yán)格的語(yǔ)法規(guī)范，比如不能加分號(hào)，使用單引號(hào)，代碼結(jié)尾還有有一個(gè)空行等等過于嚴(yán)格的要求，讓代碼經(jīng)常報(bào)錯(cuò)，與修改一個(gè)空格，一個(gè)分號(hào)的事就大大降低了開發(fā)效率，所以需要解除一些工具幫我們自動(dòng)按照esllint進(jìn)行代碼自動(dòng)規(guī)范化。
解決
我是使用了三個(gè)插件來實(shí)現(xiàn)保存自動(dòng)進(jìn)行代碼規(guī)范化的功能，非常的方便。
步驟：
1）首先確保自己的vscode中安裝了eslint、vetur、prettier這三個(gè)插件
2）在配置文件（setting.json）中進(jìn)行配置
按ctrl+shift+p打開搜索setting，打開配置文件
在配置文件中添加如下配置
// 在保存的時(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'
}
大功告成了~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
TCP協(xié)議詳解_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
本文描述了TCP協(xié)議，首先簡(jiǎn)單介紹了TCP完成了一些什么功能；介紹了TCP報(bào)文格式，以及典型報(bào)文的數(shù)據(jù)格式?，F(xiàn)在通過本文給大家詳細(xì)介紹，感興趣的的朋友一起看看吧2017-07-07
老生常談?dòng)?jì)算機(jī)中的編碼問題(必看篇)
下面小編就為大家?guī)硪黄仙Ｕ動(dòng)?jì)算機(jī)中的編碼問題(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
當(dāng)一個(gè)軟件打開一個(gè)文本時(shí),它要做的第一件事是決定這個(gè)文本究竟是使用哪種字符集的哪種編碼保存的。2008-09-09
這篇文章主要為大家介紹了conda常用命令整理及用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
HTTP長(zhǎng)連接與短連接使用方法及測(cè)試詳解
這篇文章主要介紹了HTTP長(zhǎng)連接與短連接使用方法及測(cè)試,需要的朋友可以參考下2020-02-02
這兩天“微信小程序”這個(gè)詞占據(jù)了朋友圈，大有一番風(fēng)起云涌之勢(shì)，當(dāng)然，還不可能夸張到使原生App開發(fā)人員失業(yè)這種程度。當(dāng)然，作為一名技術(shù)人員，時(shí)刻保持對(duì)新技術(shù)的好奇心是必須的，所以在網(wǎng)上找大神的教程，搭建了一下開發(fā)環(huán)境，來學(xué)習(xí)一下這個(gè)新的開發(fā)框架。2016-09-09
手把手教你用Hexo+Github搭建屬于自己的博客(詳細(xì)圖文)
越來越多的朋友選擇自己架設(shè)自己的博客，以來方便個(gè)性樣式二來也能帶來不少收入，大部分朋友都會(huì)選擇wordpress搭建個(gè)人博客，這里為大家分享使用Hexo+Github搭建開發(fā)者博客的方法,需要的朋友可以參考下2017-10-10
怎樣寫好commit?message提高業(yè)務(wù)效率
這篇文章主要為大家介紹了如何寫好commit?message幫助業(yè)務(wù)團(tuán)隊(duì)提高效率方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
git分支的創(chuàng)建、切換、合并及刪除操作小結(jié)
這篇文章給大家詳細(xì)的介紹了關(guān)于git分支的操作，其中包括查看現(xiàn)存分支、創(chuàng)建分支、切換分支、提交分支、分支合并以及刪除分支，文中給出了詳細(xì)示例代碼，相信對(duì)大家的學(xué)習(xí)和理解很有幫助，有需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
文章介紹了如何在IntelliJ IDEA中使用Git進(jìn)行代碼拉?。╬ull）操作,包括通過點(diǎn)擊刷新按鈕和在終端中執(zhí)行命令兩種方法,同時(shí),還提供了解決項(xiàng)目未更新問題的步驟2024-11-11