vue-create新建的一個(gè)沒(méi)有eslint的初始化項(xiàng)目：
如何加上eslint?
1. 安裝如下插件
@vue/cli-plugin-eslint // vue-cli 的 eslint 插件,裝了這個(gè)就會(huì)去找eslint配置文件了
eslint
eslint-plugin-vue // eslint檢查.vue文件的<template>和<script>
eslint-config-prettier // 禁用掉了一些不必要的以及和 Prettier 相沖突的 ESLint 規(guī)則
eslint-plugin-prettier // prettier 作為 ESLint 的規(guī)則來(lái)用,代碼不符合 Prettier 的標(biāo)準(zhǔn)時(shí)，會(huì)報(bào) ESLint 錯(cuò)誤
eslint-config-standard // 一個(gè)js代碼規(guī)范启泣，比eslint的要全，下面三個(gè)是它的依賴
eslint-plugin-import
eslint-plugin-n
eslint-plugin-promise
@babel/eslint-parser // esLint的Babel解析器代替babel-eslint
2. 根目錄創(chuàng)建.eslintrc.js
module.exports = {
root: true, // 將ESLint限制到一個(gè)特定的項(xiàng)目思杯、目錄,為true,則ESLint會(huì)停止在父級(jí)目錄中尋找
env: {
// 啟用特定環(huán)境的全局變量
browser: true, // 瀏覽器全局變量
node: true, // Node.js 全局變量和 Node.js 作用域
es6: true, // 啟用除了modules以外的所有 EC6 特性,開(kāi)啟后會(huì)自動(dòng)設(shè)置ecmaVersion為6
},
/** eslint:recommended(自動(dòng)啟用部分列核心功能) 、 eslint:all(啟用當(dāng)前Eslint全部核心功能) */
// vue-cli創(chuàng)建后的默認(rèn)配置
// extends: ['plugin:vue/essential', 'eslint:recommended'],
// 沒(méi)有用prettier挠进，但是一旦vscode開(kāi)啟了色乾，就會(huì)沖突報(bào)錯(cuò)
// extends: ["plugin:vue/recommended", "standard"],
// eslint規(guī)則+prettier風(fēng)格組合
// extends: ["plugin:vue/recommended", "plugin:prettier/recommended"],
//
/**
eslint規(guī)則+standard+prettier風(fēng)格組合
vscode一定要安裝開(kāi)啟prettier，并且設(shè)為默認(rèn)格式
且不符合prettier格式的不會(huì)報(bào)紅领突，但保存會(huì)自動(dòng)修復(fù)
*/
// extends: ["plugin:vue/recommended", "standard", "prettier"],
/**
最終方案：
eslint規(guī)則+standard+prettier風(fēng)格組合
可不安裝prettier暖璧，直接用eslint設(shè)為保存的格式
會(huì)報(bào)紅且保存自動(dòng)修復(fù)
*/
extends: [
"plugin:vue/recommended",
"standard",
"plugin:prettier/recommended",
],
parserOptions: {
parser: "@babel/eslint-parser", // 一個(gè)對(duì)Babel解析器的包裝，使其能夠與 ESLint 兼容
},
// 當(dāng)訪問(wèn)當(dāng)前文件內(nèi)未定義的變量時(shí)君旦，no-undef 規(guī)則將發(fā)出警告澎办。
// 如果想在一個(gè)文件里使用全局變量，可以 ESLint 中定義這些全局變量金砍。
globals: {
wx: "readonly",
WeixinJSBridge: "readonly",
},
};
3. vscode開(kāi)啟eslint
安裝eslint插件局蚀，并且在settings.json中配置如下，保存會(huì)自動(dòng)修復(fù)
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
4. 小插曲：是否需要加standard
因?yàn)橐婚_(kāi)始我的配置是這種恕稠，我覺(jué)得不需要加standard琅绅，經(jīng)過(guò)考察，standard的校驗(yàn)更全面鹅巍，還是加上千扶。
extends: ["plugin:vue/recommended", "plugin:prettier/recommended"],
舉個(gè)例子：
standard的規(guī)則中配置了 no-use-before-define 禁止定義前使用 no-eval 禁止使用eval 就拿著兩個(gè)舉例吧：
fn1(val) {
// 下面2行代碼，如果配置eslint-config-standard就會(huì)報(bào)錯(cuò)骆捧，不配置就不會(huì)
eval("22");
alert(a);
},
