【簡(jiǎn)易教程】基于Vue-cli使用eslint指南

插件安裝

首先在vscode插件中搜索eslint和prettier。

啥也不管，這倆必須得裝。

插件簡(jiǎn)介

vscode插件庫(kù)里的eslint是用來(lái)在你寫代碼的時(shí)候就直接給你報(bào)錯(cuò)。（vue-cli中的eslint是在瀏覽器中報(bào)錯(cuò)）

prettier是代碼格式化插件，用來(lái)輔助eslint，否則你調(diào)了花半天，一格式化全沒有。

實(shí)戰(zhàn)演練

# 創(chuàng)建一個(gè)vue項(xiàng)目 vue-cli@2.9.6，更高版本請(qǐng)使用create創(chuàng)建項(xiàng)目。 vue init webpack eslint_test

eslint那一欄請(qǐng)選擇none，這樣vue-cli會(huì)幫你下載eslint，并進(jìn)行一些基本的配置。

但是不會(huì)幫你設(shè)置rules（rules就是各種代碼規(guī)范的不允許）。

下載好后目錄結(jié)構(gòu)如下：

文件介紹

里面有兩個(gè)文件非常重要。

.eslintignore 和 .eslintrc.js

.eslintignore ，見名知意，ignore 忽視一些文件。即在文件里面規(guī)定的不會(huì)被eslint進(jìn)行檢查。

例如這里面不會(huì)對(duì)/build/文件下面的文件做語(yǔ)法檢查。

.eslintrc.js ，是eslint能起作用的根本。vue-cli里面eslint和vscode里的eslint都以這個(gè)文件為判定標(biāo)準(zhǔn)。

補(bǔ)充文件

我們得在根目錄下新建一個(gè).prettierrc文件。

.prettierrc，是prettier格式化的配置文件，建議用json格式書寫。

例如你如果配置下面樣式。

{// 采用分號(hào)"semi": true,// 采用單引號(hào)"singleQuote": true,// tab采用兩個(gè)空格長(zhǎng)度"tabWidth": 2 }

格式化過(guò)程就會(huì)像下圖所示：

雙引號(hào)自動(dòng)改成單引號(hào)，沒加的分號(hào)，自動(dòng)補(bǔ)齊。

Eslint.js配置

上文中說(shuō)過(guò)，.eslintrc.js是eslint起作用的關(guān)鍵文件，所以我們必須學(xué)會(huì)進(jìn)行一些配置。

如果安裝eslint的時(shí)候選擇none，.eslintrc.js文件應(yīng)該和下面是一樣的。

// https://eslint.org/docs/user-guide/configuringmodule.exports = {root: true,parserOptions: {parser: 'babel-eslint'},env: {browser: true,},// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.extends: ['plugin:vue/essential'],// required to lint *.vue filesplugins: ['vue'],// add your custom rules hererules: {// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'} }

上面最重要的模塊就是rules模塊。它是給我們來(lái)設(shè)定一些eslint的規(guī)則的。

例如我在rules里面添加一條規(guī)則’no-var’: [‘error’],此時(shí)我們就不能在程序中使用var來(lái)定義變量了。

只能使用let來(lái)定義變量，const來(lái)定義常量。

rules: {// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-var': ['error'],},

例如下圖中，我寫了var a = 1;它直接報(bào)錯(cuò)了。

其他的也與之類似。附常用rule：

rules: {// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',// 尾隨逗號(hào)規(guī)則'comma-dangle': ['error',{arrays: 'always',objects: 'always',imports: 'never',exports: 'never',functions: 'never',},],// 禁止使用var規(guī)則'no-var': ['error'],// 必須使用分號(hào)semi: ['error', 'always'],// 必須使用單引號(hào)quotes: ['error', 'single'],// 必須使用兩個(gè)空格進(jìn)行縮進(jìn)indent: ['error', 2],},

附錄官網(wǎng)

prettier官網(wǎng) https://prettier.io/docs/en/configuration.html

eslint官網(wǎng) https://eslint.bootcss.com/docs/rules/

airbnb中文文檔 https://github.com/BingKui/javascript-zh#functions

總結(jié)

以上是生活随笔為你收集整理的【简易教程】基于Vue-cli使用eslint指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。