54
eslint webpack2 vue-loader配置
eslint是一個代碼檢測工具
官網如下
https://eslint.cn/
npm install eslint --save-dev
需要這幾個npm包:
- eslint
- eslint-loader
- eslint-plugin-html (用以lint一些在html文件裏麵通過script包裹的js代碼,它默認的匹配規則是不帶type屬性，或者是
/^(application|text)/(x-)?(javascript|babel|ecmascript-6)$/i,具體的內容請查閱相關文檔,通過cli啟動lint的時候定義文件後綴名時eslint --ext .html,.js) - eslint-config-standard (和2個包都是javascript-style-standard風格指南需要的包)
- eslint-plugin-promise
- eslint-plugin-standard
- eslint-friendly-formatter (生成的報告格式)
eslint --init
//初始化配置
eslint --init
ESLint 支持幾種格式的配置文件：
JavaScript - 使用 .eslintrc.js 然後輸出一個配置對象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
JSON - 使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 文件允許 JavaScript 風格的注釋。
Deprecated - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 裏創建一個 eslintConfig屬性，在那裏定義你的配置。
如果同一個目錄下有多個配置文件，ESLint 隻會使用一個。優先級順序如下：
1. .eslintrc.js
2. .eslintrc.yaml
3. .eslintrc.yml
4. .eslintrc.json
5. .eslintrc
6. package.json
配置示例
evn設置環境定義了預定義的全局變量
https://eslint.cn/docs/user-guide/configuring#specifying-environments
parser設置解釋器
https://eslint.cn/docs/user-guide/configuring#specifying-environments
global設置全局變量
https://eslint.cn/docs/user-guide/configuring#specifying-globals
rules自定義規則
https://eslint.cn/docs/user-guide/configuring#configuring-rules
- "off" 或 0 - 關閉規則
- "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)
- "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)
js module.exports = { "parser": "babel-eslint", "extends": "eslint:recommended", "plugins": [ "html" ], "env": { "browser": true, "node": true, "es6":true, "jquery":true }, "globals": { "Vue": true, "AMap": true, "tdist": true, "EXIF": true, "j_body": true, "native": true, "VueRouter": true, "pocketPost": true, "aliCnCityList": true, }, "rules": { "no-unused-vars": ["off", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }], "no-debugger": ["off"], "no-unreachable": ["off"], "no-console": ["off"], "no-extra-semi": ["off"], } };### eslint在webpack2配置如下js module: { rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', // enforce: 'pre',//是否在loader前監測，vue中我設為否 include: [path.join(__dirname, 'src')], options: { formatter: require('eslint-friendly-formatter')//錯誤輸出格式 } } ] }#### 相關參考文檔 https://segmentfault.com/a/1190000008575829?utm_source=itdadao&utm_medium=referral https://eslint.cn/docs/user-guide/configuring https://eslint.cn/docs/rules/ ##### vue-loader https://vue-loader.vuejs.org/zh-cn/workflow/linting.html https://vue-loader.vuejs.org/zh-cn/options.html ------ ##### 小無路博客 -------
最後更新：2017-08-30 17:02:26