eslint開發(fā)嚴格模式警告錯誤

如果我們初次使用vue-cli來構建單頁SPA應用，在擼代碼的過程中有可能會遇到這種因為代碼縮進導致

頁面報錯的問題，導致我們煩不勝煩。接下來我們就來看一看如何解決這個小問題。。。

原因分析

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

解決辦法

方法一：了解eslint-loader規(guī)則，嚴格按照規(guī)范書寫代碼

首先縮進不能用tab要用空格這個比較惡心，因為習慣了tab縮進的習慣用空格去縮進就比較別扭了，

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

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

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

預期縮進6個空格，但找到6個制表符（Expected indentation of 6 spaces but found 6 tabs），“

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

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

方法二：關閉eslint

團隊開發(fā)中經常遇到需要使用eslint 語法糾正的情況； 

錯誤提示： expected indentation of 2 spaces but found 1 tab 

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

找到vue 項目中的 .eslintrc.js , 在rules 中 添加如下，然后重啟npm run dev，來加載我們改過的配置

'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  
}

如果實在普通的webpack項目中我們只需要打開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項目中，我們需要打開項目根目錄下的build文件夾并且打開該文件夾下的webpack.base.conf.js文件，然后去除ESlint在文件中的配置代碼就可以了。

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

vue踩坑之eslint 

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

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

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

經過查找后發(fā)現(xiàn)原來是試用vue ui創(chuàng)建項目時，給我們加了一個eslint進行代碼檢查，真是好東西。

但是為了提高開發(fā)調試效率，臨時屏蔽吧，屏蔽方法很簡單，打開文件“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"
?? ?}
? },

好了，重新啟動一下  npm run serve

開發(fā)過程變的順暢多了，終于可以臨時屏蔽一下我們不想看見的組件了。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論