eslint開(kāi)發(fā)嚴(yán)格模式警告錯(cuò)誤

如果我們初次使用vue-cli來(lái)構(gòu)建單頁(yè)SPA應(yīng)用，在擼代碼的過(guò)程中有可能會(huì)遇到這種因?yàn)榇a縮進(jìn)導(dǎo)致

頁(yè)面報(bào)錯(cuò)的問(wèn)題，導(dǎo)致我們煩不勝煩。接下來(lái)我們就來(lái)看一看如何解決這個(gè)小問(wèn)題。。。

原因分析

通過(guò)查看package.json文件我們可以發(fā)現(xiàn)，在文件中默認(rèn)安裝了eslint-loader模塊，eslint-loader模塊是目前相對(duì)比較流行的代碼檢測(cè)工具，可以檢測(cè)書(shū)寫(xiě)的代碼是否符合統(tǒng)一規(guī)范，可以在一些比較大型的項(xiàng)目開(kāi)發(fā)中統(tǒng)一開(kāi)發(fā)人員的代碼風(fēng)格，這也就是為什么代碼縮進(jìn)有可能導(dǎo)致頁(yè)面報(bào)錯(cuò)的原因（代碼縮進(jìn)不符合規(guī)范）。

解決辦法

方法一：了解eslint-loader規(guī)則，嚴(yán)格按照規(guī)范書(shū)寫(xiě)代碼

首先縮進(jìn)不能用tab要用空格這個(gè)比較惡心，因?yàn)榱?xí)慣了tab縮進(jìn)的習(xí)慣用空格去縮進(jìn)就比較別扭了，

意外的制表符（Unexpected tab character），

在“{”之前找到的多個(gè)空格（Multiple spaces found before '{'），

混合空格和制表符（Mixed spaces and tabs），

預(yù)期縮進(jìn)6個(gè)空格，但找到6個(gè)制表符（Expected indentation of 6 spaces but found 6 tabs），“

返回”后的預(yù)期空間（Expected space(s) after "return"）

這些問(wèn)題的原因在于不能使用tab去空格要用空格去空格，這個(gè)比較繞嘴，但是開(kāi)啟嚴(yán)格模式就出現(xiàn)惡心的警告對(duì)于強(qiáng)迫癥的我是不能允許的，但是去掉嚴(yán)格模式又有點(diǎn)不符合規(guī)范，符合規(guī)范吧，開(kāi)發(fā)效率的就低，難受香菇！

方法二：關(guān)閉eslint

團(tuán)隊(duì)開(kāi)發(fā)中經(jīng)常遇到需要使用eslint 語(yǔ)法糾正的情況； 

錯(cuò)誤提示： expected indentation of 2 spaces but found 1 tab 

但是 tab 和 space 提示真的很頭疼，可以通過(guò)下面方式解決 

找到vue 項(xiàng)目中的 .eslintrc.js , 在rules 中 添加如下，然后重啟npm run dev，來(lái)加載我們改過(guò)的配置

'no-tabs': 0,    
'no-mixed-spaces-and-tabs': 0,   
'indent': ["off", "tab"],    
'no-trailing-spaces': 0,  
 
// add your custom rules here  
'rules': {    
    // allow paren-less arrow functions    
    'arrow-parens': 0,    
    // allow async-await    
    'generator-star-spacing': 0,    
    // allow debugger during development    
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,    
    'no-tabs': 0,   
    'no-mixed-spaces-and-tabs': 0,    
    'indent': ["off", "tab"],    
    'no-unused-vars': 0,    
    'no-trailing-spaces': 0,    
    "eqeqeq": 0  
}

如果實(shí)在普通的webpack項(xiàng)目中我們只需要打開(kāi)webpack.config.js文件，然后去除ESlint在文件中的配置代碼就可以了；

?test: /\.(js|vue)$/, ?
?loader: 'eslint-loader', ?
?enforce: 'pre', ?
?include: [resolve('src'), resolve('test')], ?
?options: { ? ?
? ? ?formatter: require('eslint-friendly-formatter'), ? ?
? ? ?emitWarning: !config.dev.showEslintErrorsInOverlay ?
?}

如果是在vue項(xiàng)目中，我們需要打開(kāi)項(xiàng)目根目錄下的build文件夾并且打開(kāi)該文件夾下的webpack.base.conf.js文件，然后去除ESlint在文件中的配置代碼就可以了。

...(config.dev.useEslint ? [createLintingRule()] : []),

vue踩坑之eslint 

使用vue的過(guò)程中發(fā)現(xiàn)，如果引用了組件，但是沒(méi)有使用，系統(tǒng)總是提示：

component has been registered but not used vue/no-unused-components vue.js vue-component share

前期項(xiàng)目總是要把代碼刪除的一干二凈，這樣雖然對(duì)代碼非常好，但是開(kāi)發(fā)過(guò)程是個(gè)麻煩事，畢竟開(kāi)發(fā)過(guò)程中，可能為了調(diào)試臨時(shí)屏蔽一個(gè)兩個(gè)組件，但總是提示這個(gè)，還要把所有和這個(gè)組件有關(guān)的代碼全部屏蔽了，太痛苦了。

經(jīng)過(guò)查找后發(fā)現(xiàn)原來(lái)是試用vue ui創(chuàng)建項(xiàng)目時(shí)，給我們加了一個(gè)eslint進(jìn)行代碼檢查，真是好東西。

但是為了提高開(kāi)發(fā)調(diào)試效率，臨時(shí)屏蔽吧，屏蔽方法很簡(jiǎn)單，打開(kāi)文件“package.json”，eslintConfig 字段下的 rules 添加規(guī)則，代碼如下：

? "eslintConfig": {
? ? "root": true,
? ? "env": {
? ? ? "node": true
? ? },
? ? "extends": [
? ? ? "plugin:vue/essential",
? ? ? "eslint:recommended"
? ? ],
? ? "parserOptions": {
? ? ? "parser": "babel-eslint"
? ? },
? ? "rules": {
?? ??? ?"vue/no-unused-components": "off"
?? ?}
? },

好了，重新啟動(dòng)一下  npm run serve

開(kāi)發(fā)過(guò)程變的順暢多了，終于可以臨時(shí)屏蔽一下我們不想看見(jiàn)的組件了。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論