隨著前端開發(fā)技術(shù)的不斷發(fā)展和前端工程化的推廣，以及代碼規(guī)范性的重視，JavaScript代碼的檢查和排查變得越來越重要。而 ESLint 作為一款代碼檢查工具，可以幫助我們在編寫 JavaScript 代碼的時(shí)候發(fā)現(xiàn)編碼問題和潛在錯(cuò)誤，避免因代碼質(zhì)量的問題導(dǎo)致的 Bug，提高代碼的可讀性和兼容性。

而當(dāng)我們使用 Vue.js 進(jìn)行開發(fā)時(shí)，如何啟用 ESLint 呢？Vue CLI 提供了開箱即用的 ESLint 配置，可以幫助我們快速啟用 ESLint，在開發(fā)過程中發(fā)現(xiàn)問題并快速解決，讓開發(fā)效率更高。

首先，我們需要使用 Vue CLI 快速搭建一個(gè) Vue.js 項(xiàng)目。

// 安裝 Vue CLI
npm install -g @vue/cli// 創(chuàng)建一個(gè)新項(xiàng)目
vue create my-project

安裝完成后，我們在項(xiàng)目根目錄下打開終端，并執(zhí)行以下命令，啟用 ESLint。

// 進(jìn)入項(xiàng)目根目錄
cd my-project
// 安裝 ESLint
npm install --save-dev eslint eslint-plugin-vue

安裝完成后，我們需要在項(xiàng)目的主目錄下新建一個(gè) .eslintrc.js 文件，用于進(jìn)行 ESLint 配置。

module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': 'off',
'no-debugger': 'off'
}
}

其中，我們設(shè)置了一些基礎(chǔ)的 ESLint 配置，如 root 表示這是根目錄，env 表示環(huán)境為 Node，extends 表示使用的是 eslint-plugin-vue 和 @vue/standard 規(guī)則來檢查代碼。

最后，在 package.json 文件里添加以下 script 即可啟動 ESLint。

"scripts": {
"lint": "eslint --ext .js,.vue src"
}

命令說明：--ext .js,.vue表示要檢測的文件類型為 .js 和 .vue。

至此，我們已經(jīng)成功地啟用了 ESLint，并且基礎(chǔ)配置已經(jīng)完成，可以在編寫 Vue.js 代碼時(shí)快速檢測代碼，并發(fā)現(xiàn)問題。如果需要更加深入的定制化配置，可以參考官網(wǎng)的文檔，進(jìn)行自定義配置。