Vue CLI 3開發中屏蔽的EsLint錯誤 （.eslintrc.js 在vue3+中 修改這個）

一、關閉eslint校驗
有了eslint的校驗，能夠來規範開發人員的代碼，是挺好的。可是有些像縮進、空格、空白行之類的規範，在開發過程當中一直報錯，未免太過於苛刻了。因此，我仍是會選擇關閉eslint校驗。 
 
下面就介紹一下vue項目中如何關閉這個校驗。 
首先咱們在建立一個vue項目的時候，會有一個選擇：Use ESLint to lint your code? (Y/n)，在這一步，咱們選擇no就行了。 
可是若是咱們不當心選擇了Y，在開發過程當中一直報錯，該怎麼辦呢？咱們不須要刪除項目從新建立，咱們只要修改build\webpack.base.conf.js這個文件就好啦。 

上圖紅框框部分，我項目中的文件內容是這樣的，其餘項目可能有別的一些內容，咱們把框框中的內容註釋掉或者去掉就能夠了。 

 

如今運行項目，就不會報錯了。 

二、最後
關閉eslint校驗就是這麼簡單，但願對你有幫助。 
可是eslint可輔助規範代碼風格，有效控制代碼質量，而且在多人合做的狀況下，也可使代碼看起來更加的整潔。因此在開發過程當中，仍是建議保留eslint的校驗的，養成一個好的編碼習慣。

關閉eslint校驗

 

===================================

Vue開發中，特別是當你閱讀分析別人的其中早期版本的Vue代碼時每每會遭遇到滿屏幕的煩人的EsLint錯誤。有關EsLint這個工具的做用再也不贅述。查閱網上參考文檔，大可能是針對早起版本Vue CLI工具項目的，在我最新使用的Vue CLI 3生成的工程中根本不起做用。無奈之下，認真學習了Vue CLI 3官方文檔，終於找到最佳答案。

辦法

Vue這個前端框架相對於React和Angular，入門會很是快。可是，到了中後期實戰階段仍然有許多工程實際問題須要咱們一塊一塊地攻克。Vue CLI這個被稱爲「腳手架」的工具是必須克服的攔路虎，不過，這個工具版本更新很是快。觀察網絡上的許多案例及手頭參考書，即便是最新的，主要是基於2.X版本介紹的。在解決如題所示問題時當前的3.X版本天然與2.X版本大不同。在Vue CLI 3生成的工程中只要在項目根目錄下建立一下配置文件vue.config.js，而後在其中加入下面一行便可屏蔽煩人的EsLint各類提示。提示：文後參考資料2中直接提到此種方法。

// vue.config.js

module.exports = {

    lintOnSave: false

}

補充

在網絡上搜索到的各類參考中，通常都是提到把文件.eslintrc.js中的各類規則開關進行修改，以下所示：

module.exports = {

  root: true,

  env: {

    node: true

  },

  'extends': [

    'plugin:vue/essential',

    '@vue/standard'

  ],

  rules: {

    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

    'no-mixed-spaces-and-tabs': [0,false],

    'no-tabs':'on',

    'eol-last':0,

    'space-before-function-paren': 0

  },

  parserOptions: {

    parser: 'babel-eslint'

  }

}

各位請注意上述rules段中的部分，在CLI 3下僅修改這些部分根本不起做用！

另外，通過上面LintOnSave辦法的開關控制後，我反覆地修改並在WebStorm內置命令行下運行yarn serve從新編譯項目，有不少時候感受仍是有點問題，我懷疑是Vue CLI 3中存在必定的BUG所致（我使用的版本是3.0.5），目前最新版本是3.1.1。

參考

1.https://cli.vuejs.org/guide/

2.https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint

做者：holdtom連接：http://www.imooc.com/article/269003#