一、ESLint
創(chuàng)新互聯(lián)公司是專業(yè)的天津網(wǎng)站建設(shè)公司,天津接單;提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行天津網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
協(xié)同開發(fā)過程中,經(jīng)常感受到來自代碼檢視的惡意。代碼習(xí)慣不一致,看半天;居然提交低級(jí)錯(cuò)誤,我的天(╯‵□′)╯︵┻━┻!...研究了一番,決定使用ESLint來做代碼規(guī)范檢查。
二、配置方式
三、配置過程(配置文件)
安裝相關(guān)npm包
yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev
增加文件
修改webpack配置文件
module.exports = { module: { rules: [ test: /\.(js|vue)$/, loader: "eslint-loader", enforce: "pre", //指定檢查的目錄 include: [resolve(__dirname, 'src')], //eslint檢查報(bào)告的格式規(guī)范 options: { formatter: require("eslint-friendly-formatter") } ] } }
四、配置文件詳解
以.eslintrc.js為例
module.exports = { //一旦配置了root,ESlint停止在父級(jí)目錄中查找配置文件 root: true, //解析器 parser: "babel-eslint", //想要支持的JS語言選項(xiàng) parserOptions: { //啟用ES6語法支持(如果支持es6的全局變量{env: {es6: true}},則默認(rèn)啟用ES6語法支持) //此處也可以使用年份命名的版本號(hào):2015 ecmaVersion: 6, //默認(rèn)為script sourceType: "module", //支持其他的語言特性 ecmaFeatures: { //... } }, //代碼運(yùn)行的環(huán)境,每個(gè)環(huán)境都會(huì)有一套預(yù)定義的全局對象,不同環(huán)境可以組合使用 env: { es6: true, browser: true, jquery: true }, //訪問當(dāng)前源文件中未定義的變量時(shí),no-undef會(huì)報(bào)警告。 //如果這些全局變量是合規(guī)的,可以在globals中配置,避免這些全局變量發(fā)出警告 globals: { //配置給全局變量的布爾值,是用來控制該全局變量是否允許被重寫 test_param: true }, //支持第三方插件的規(guī)則,插件以eslint-plugin-作為前綴,配置時(shí)該前綴可省略 //檢查vue文件需要eslint-plugin-vue插件 plugins: ["vue"], //集成推薦的規(guī)則 extends: ["eslint:recommended", "plugin:vue/essential"], //啟用額外的規(guī)則或者覆蓋默認(rèn)的規(guī)則 //規(guī)則級(jí)別分別:為"off"(0)關(guān)閉、"warn"(1)警告、"error"(2)錯(cuò)誤--error觸發(fā)時(shí),程序退出 rules: { //關(guān)閉“禁用console”規(guī)則 "no-console": "off", //縮進(jìn)不規(guī)范警告,要求縮進(jìn)為2個(gè)空格,默認(rèn)值為4個(gè)空格 "indent": ["warn", 2, { //設(shè)置為1時(shí)強(qiáng)制switch語句中case的縮進(jìn)為2個(gè)空格 "SwitchCase": 1, //分別配置var、let和const的縮進(jìn) "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }], //定義字符串不規(guī)范錯(cuò)誤,要求字符串使用雙引號(hào) quotes: ["error", "double"], //.... //更多規(guī)則可查看http://eslint.cn/docs/rules/ } }
使用JavaScript注釋啟用或禁止指定規(guī)則
/* eslint-disable */ alert('message'); /* eslint-enable no-alert, no-console*/ ...
層疊配置
ESlint支持層疊配置,檢測文件的規(guī)則是其目錄層級(jí)結(jié)構(gòu)中所有.eslintrc文件的組合,當(dāng)規(guī)則沖突的時(shí)候,離檢測文件最近的規(guī)則優(yōu)先。
默認(rèn)情況下,ESlint會(huì)沿著父級(jí)目錄網(wǎng)上尋找配置文件,直到根目錄。如果配置文件中有root: true,則ESlint會(huì)停止在父級(jí)目錄中查找。
五、配置過程中出現(xiàn)的問題
出現(xiàn)錯(cuò)誤:Use the latest vue-eslint-parser。
解決方法: 把parser: "babel-eslint"移動(dòng)到parserOptions中。
{ //parser: "babel-eslint", parserOptions: { parser: "babel-eslint", //... } }
問題原因: eslint-plugin-vue中的很多規(guī)則都需要vue-eslint-parser檢查<template>, vue-eslint-parser和babel-parser二者有沖突。
參考鏈接
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
名稱欄目:vue+webpack中配置ESLint
URL分享:http://muchs.cn/article44/iegehe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、商城網(wǎng)站、網(wǎng)站導(dǎo)航、微信公眾號(hào)、服務(wù)器托管、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)