js語法檢查 · 前端

``` npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D ``` webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ /* 語法檢查： eslint-loader eslint 注意：只檢查自己寫的源代碼，第三方的庫是不用檢查的設置檢查規則： package.json中eslintConfig中設置~ "eslintConfig": { "extends": "airbnb-base" } airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint */ { test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader', options: { // 自動修復eslint的錯誤 fix: true } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello webpack</h1> </body> </html> ``` src/js/index.js ``` function add(x, y) { return x + y; } // 下一行eslint所有規則都失效（下一行不進行eslint檢查） // eslint-disable-next-line console.log(add(2, 5)); ```