eslint規范

• • • • 背景
      • 配置eslint檢測不通過，錯誤顯示在瀏覽器，且編譯失敗
      • vscode配置eslint代碼提示和自動格式化功能
      • • 安裝eslint插件
        • 開啟錯誤提示
        • 配置自動格式化

背景

在開發過程中eslint沒有進行強制規范，導致項目代碼很多警告，代碼不規范，為此從根源上解決進行強制規范

配置eslint檢測不通過，錯誤顯示在瀏覽器，且編譯失敗

vue.config.js配置如下內容：

module.exports = {devServer: {overlay: {warnings: true,errors: true}},lintOnSave: 'error',// 用途：設置是否在開發環境下每次保存代碼時都啟用 eslint驗證。// false：關閉每次保存都進行檢測// true：開啟每次保存都進行檢測，效果與warning一樣// ‘warning’：開啟每次保存都進行檢測，lint 錯誤將顯示到控制臺命令行，而且編譯并不會失敗。// ‘error’：開啟每次保存都進行檢測，lint 錯誤將顯示到瀏覽器頁面上，且編譯失敗。// ‘default’：同’error’chainWebpack: config => {config.module.rule('eslint').use('eslint-loader').loader('eslint-loader').tap(opt => {opt.emitWarning = opt.emitError = opt.failOnWarning = opt.failOnError = true;return opt;});} };

npm run serve啟動運行后會出現如下效果：

訪問頁面效果如下圖：

npm run build編譯打包失敗

vscode配置eslint代碼提示和自動格式化功能

安裝eslint插件

開啟錯誤提示

如下區域進行打勾

不符合eslint規范時會如下提示：

配置自動格式化

為了提高工作效率，可以配置自動格式化
點擊如下，打開setting.json文件

配置添加下面內容：

"editor.codeActionsOnSave": {"source.fixAll.eslint": true},

這樣代碼在保存時會自動的進行格式化

總結

以上是生活随笔為你收集整理的eslint规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。