iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

Vue菜鳥的自我學習days系列 第 25

25.eslint

下面提供 esling 的設定值,在專案根目錄打開 .eslintrc.js 編輯

{
...
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-alert': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'linebreak-style': process.env.NODE_ENV === 'production' ? ['error', 'windows'] :
'off',
'space-before-function-paren': process.env.NODE_ENV === 'production' ? ['error',
'never'] : 'off',
'import/extensions': process.env.NODE_ENV === 'production' ? ['error', 'never'] :
'off'
},
...
}

在正式發佈環境若存在consolelog、debugger、alert等,會報error

另外,透過安裝 VS Code 的套件 ESLint 來幫助我們在進行檔案編輯時提示 code style 錯誤,以及儲存時自動以
eslint 設定值調整 code style

  1. 安裝 ESLint 套件,並重新開啟 VS Code
  2. 按下 ctrl + , 來開啟使用者設定
  3. 在使用者設定頁的右上角,點擊 ... -> Open settings.json
  4. 在 User Settings.json 加入
{
...
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
"eslint.autoFixOnSave": true
}

上一篇
24.Rxjs 處理非同步3
下一篇
26.Computed vs Methods
系列文
Vue菜鳥的自我學習days39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言