為 Vue 專案加上 eslint

背景
vue2 + webpack2

所需要的 package
npm i babel-eslint eslint eslint-config-vue eslint-loadereslint-plugin-vue --save-dev

webpack loader 調整為:
{
// 轉 ES6 以及 處理 Eslint 檢查
test: /\.js$/,
use: [
'babel-loader',
'eslint-loader'
],
include: [
     path.join(__dirname, './resources/assets/js/')
]
},

include 可以換成 exclude, 如果你的專案結構很簡單的話。

另外在 loaderOptionsPlugin 調整為:

vue: {
loaders: {
js: 'babel-loader!eslint-loader',
scss: 'style-loader!css-loader!sass-loader'
}
},
eslint: {
configFile: './.eslintrc'
}

接著在根目錄建立 .eslintrc 檔案,他可能這樣,你可以再複寫你的設定:

{
"extends": ["vue"],
"plugins": ["vue"],
"rules": {
"vue/jsx-uses-vars": 2,
"no-unused-vars": 0
  }
}



參考:
在Vue+Babel+Webpack环境中使用ESLint
https://github.com/vuejs/eslint-plugin-vue

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源