Vue.js-cli配置eslint


概述: 

  ESLint 是一個開源的 JavaScript 代碼檢查工具,由 Nicholas C. Zakas 於2013年6月創建。代碼檢查是一種靜態的分析,常用於尋找有問題的模式或者代碼,並且不依賴於具體的編碼風格。對大多數編程語言來說都會有代碼檢查,一般來說編譯程序會內置檢查工具。

JavaScript 是一個動態的弱類型語言,在開發中比較容易出錯。因為沒有編譯程序,為了尋找 JavaScript 代碼錯誤通常需要在執行過程中不斷調試。像 ESLint 這樣的可以讓程序員在編碼的過程中發現問題而不是在執行的過程中。

ESLint 的初衷是為了讓程序員可以創建自己的檢測規則。ESLint 的所有規則都被設計成可插入的。ESLint 的默認規則與其他的插件並沒有什么區別,規則本身和測試可以依賴於同樣的模式。為了便於人們使用,ESLint 內置了一些規則,當然,你可以在使用過程中自定義規則。

ESLint 使用 Node.js 編寫,這樣既可以有一個快速的運行環境的同時也便於安裝。

特點:

所有都是可拔插的

  • 內置規則和自定義規則共用一套規則 API
  • 內置的格式化方法和自定義的格式化方法共用一套格式化 API
  • 額外的規則和格式化方法能夠在運行時指定
  • 規則和對應的格式化方法並不強制捆綁使用

每條規則:

  • 各自獨立
  • 可以開啟或關閉(沒有什么可以被認為“太重要所以不能關閉”)
  • 可以將結果設置成警告或者錯誤

另外:

  • ESLint 並不推薦任何編碼風格,規則是自由的
  • 所有內置規則都是泛化的

項目:

  • 通過豐富文檔減少溝通成本
  • 盡可能的簡單透明
  • 相信測試的重要性

配置:

  全局安裝:

    cnpm install -g eslint

  初始化:

    eslint --init  

    初始化后按照提示安裝

     npm install --save setimmediate

  配置:Build/webpack.base.conf.js

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

  文件配置

    初始化后按照提示安裝(插件)

    cnpm install eslint-friendly-formatter

    cnpm install eslint-loader

  安裝兼用vue

    cnpm install eslint-plugin-html

    .eslintrc.js 添加聲明vue使用

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // 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
  }
}

Eslint報錯錯誤統計:

enlint 有很多的rules,為了改變rule的設置,可以設置rule ID等同於一些規則屬性:如
  "off" or 0 關閉規則
  "warn" or 1 打開規則,出現警告提示
  "error" or 2 打開規則,出現錯誤提示

參數說明:
  參數1 : 錯誤等級
  參數2 : 處理方式

  1. 結尾分號:

    "semi": ["error", "always"]     

    錯誤信息: semi  Missing semicolon 結尾沒有‘;’

  2./雙引號

    "quotes": ["error", "double" ],   

    "quotes": ["error", "single" ],   

    錯誤信息:quotes  Strings must use doublequote引用字符串必須使用雙引號

  3.隔斷限制(還沒弄清楚)

    "linebreak-style": ["error", "" ],  

    錯誤信息:

  4.縮進限制:

    "indent": ["error",4],      

    錯誤信息:

  5.函數參數不能重復

    "no-dupe-args": ["error", 2]  

    錯誤信息:Parsing error: Argument name clash 解析錯誤:參數名稱沖突

參考:https://www.cnblogs.com/luxiaoxiao/p/6432788.html

官網:http://eslint.cn/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM