vuecli結合eslint靜態檢查

2022-08-29 19:42:13 字數 2681 閱讀 5423

搭建vue專案開發可能選擇vue-cli專案腳手架快速建立vue專案。(

npm install -g vue-cli
這種方式安裝比較慢,可以用國內**映象安裝,cnpm,安裝cnpm

npm install -g cnpm --registry=
繼續安裝

cnpm install -g vue-cli
vue-cli腳手架自帶webpack打包工具,建立乙個基於webpack模板的新專案

vue init webpack my-project
這裡需要進行一些配置,預設回車即可

this will install vue 2.x version of the template.

for vue 1.x use: vue init webpack#1.0 my-project

? project name my-project

? project description a vue.js project

? author runoob ? vue build standalone

? use eslint to lint your code? yes

? pick an eslint preset standard

? setup unit tests with karma + mocha? yes

? setup e2e tests with nightwatch? yes

vue-cli · generated "my-project".

to get started:

cd my-project

npm install

npm run dev

documentation can be found at

eslint配置方式主要有兩種:

注釋配置:使用js注釋來直接嵌入eslint配置資訊到乙個檔案裡

配置檔案:使用乙個js,json或者yaml檔案來給整個目錄和它的子目錄指定配置資訊。這些配置可以寫成乙個檔名.eslintrc.*的檔案或者package.json檔案裡的eslintconfig項裡

這兩種方式eslint都會自動尋找然後讀取,也可以直接在命令行內指定乙個配置檔案。

一般需要我們去配置項包括:

環境:你的指令碼會在哪種環境下執行。每個環境帶來了一組特定的預定義的全域性變數。

全域性變數:指令碼執行期間會訪問額外的全域性變數。

規則:使用那些規則,並且規則的等級是多少。

vue-cli腳手架安裝完成後,主要有幾個地方配置了eslint。

1,專案建立後專案中就會出現.eslintignore 和.eslintrc.js兩個檔案####

.eslintignore類似git的.gitignore用來配置不需要eslint檢查的檔案

.eslintrc.js主要用來配置具體規則

.eslintignore檔案

新增不啟動靜態檢查的檔案

build/*.js // 忽略build資料夾下所有的指令碼檔案

config/*.js

.eslintrc.js檔案

// 

module.exports = ,

env: ,

// extends: 'standard', //檔案配置繼承standard規則,具體訪問連線

// required to lint *.vue files

plugins: [

'html'

],// add your custom rules here

'rules':

}

說明:在rules中每個配置項後面的第乙個值為eslint規則的錯誤等級

2 在package.json檔案中配置檔案

"script" : 

"devdenpendencies" :

3 在webpack配置檔案中

webpack.base.conf.js

module: }]

}

有時候**裡有些特殊情況需要我們在某一行或者某幾行關閉eslint檢測,可以使用注釋:

1,注釋關閉所有規則

/* eslint-disable */

alert('foo');

/* eslint-enable */

2,關閉某一行的所有規則

alert('foo'); // eslint-disable-line

// eslint-disable-next-line

alert('foo');

3,在某一行關閉指定的規則

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert

alert('foo');

常用規則:

規則的細節請到eslint官方**檢視

Vue cli4 0 搭建專案配置Eslint

當搭建專案選擇完eslint之後,有個配置會問你更新換將單獨配置的檔案放到pakage.json還是放在單獨的檔案,如果是這樣選擇 單獨生成乙個檔案 最後會生成個.eslintrc.js的檔案如下 推薦選擇這個 module.exports extends plugin vue essential ...

解決Vue cli3中的Eslint報錯

今天用vue cli3搭建專案,寫了幾個頁面,去編譯的時候eslint都會丟擲錯誤 原因就是在專案搭建的時候選擇的是standard 正常模式 所以每次啟動專案的之後都會對 進行檢查,是否符合eslint規範。解決方法 想要關閉eslint語法檢查只要在.eslintrc.js檔案中找到 vue s...

socket io與vue cli的結合使用

使用vue cli生成乙個vue模版 安裝三個依賴 console.log socket埠 8000 sever.listen 8000 在package.json檔案中新增啟動指令碼 在main.js中vue.use import vuesocketio from vue socket.io im...