JavaScript 程式碼品質檢測工具「Eslint」

一、介紹

Eslint 是JavaScript 程式碼品質檢測工具，可與 webpack 整合，讓前端工程師所寫的語法較統一。

二、專案架構

圖、Visual Studio 2019 專案架構

圖、資料夾

三、安裝

圖、開啟命令提攜字元 > 切換到專案資料夾 > 輸入指令 yarn add eslint-loader eslint

• 指令

yarn add eslint-loader eslint

四、操作步驟

圖、開啟命令提攜字元 > 切換到專案資料夾 > 輸入指令 yarn run eslint --init

• 指令

yarn run eslint --init

圖、修改 main.js

• 原始碼

const path = require('path');
const glob = require('glob');

let files = glob.sync("./Src/Js/**/*.js");
let exps = [];

for (let ind in files) {
    let fname = path.basename(files[ind]);
    let folder = path.dirname(files[ind]).replace('./Src/Js', './Content/Target/Js');
    exps.push(
        {
            entry: files[ind],
            output: {
                filename: fname,
                path: path.resolve(folder),
            },
            resolve: {
                alias: {
                    'vue$': 'vue/dist/vue.esm.js'
                }
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        exclude: /node_modules/,
                        loader: 'eslint-loader',
                        options: {
                            failOnWarning: true,
                        },
                    },
                ],
            },
        },
    )
}

module.exports = exps;

圖、命令提攜字元 > 輸入指令 yarn dev > 檢測結果

五、相關連結

1. 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站
2. 讓 JavaScript 能在伺服器端執行的環境 「node.js」
3. 快速的套件管理工具「Yarn」
4. 開源的前端打包工具「Webpack」
5. 「vue」和「webpack」碰出的火花

六、參考

1. eslint