eslint 入門項目搭建過程

github 地址 ： https://github.com/gebin/eslint-demo

運行該項目

npm install

npm start

訪問 http://localhost:9000

一步一步構建該項目

一開始我想整一個項目，測試一下eslint是怎么玩的，然后我想要基於webpack，因為大部分項目我們是基於webpack來創建的。

於是我新建了一個項目，npm init,一直enter下去，生成了一個package.json，這個文件用來記錄需要的node模塊。

然后我開始安裝需要的node模塊，首先是webpack，npm install webpack --save-dev。

然后我開始查找eslint 和webpack如何結合？

在eslint的官網，http://eslint.cn/docs/user-guide/integrations ，我發現了Build Systems --》Webpack: eslint-loader。

我開始按照eslint-loader的說明安裝， npm install eslint-loader --save-dev，同時當然需要安裝eslint了，npm install eslint --save-dev。

然后我們來配置一下webpack.config.js也就是webpack的配置文件,HtmlWebpackPlugin是用來生成對應index.html入口文件，默認加載我們編譯好的js。

const path = require('path'); 
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'eslint.bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin(),
    ]
};

 

在package.json加入scripts的運行命令

"beta": "webpack --env=beta"

然后npm run beta，我們發現編譯成功，出現了一個dist目錄，以及對應的生成的eslint.bundle.js。

下一步就是配置eslint-loader了，

const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'eslint.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    // eslint options (if necessary) 
                    // fix : true
                }
            },
        ],
    },
    plugins:[
        new HtmlWebpackPlugin(),
    ]
};

 

然后嘗試一下，在文件根目錄創建一個index.js，然后npm run beta 運行，

class EslintDemo{
  func1(){
    console.log('ddddd')
  };
};

var EslintDemoSample = new EslintDemo();
EslintDemoSample.func1();

 

你會發現報錯了webpack No ESLint configuration found

這是告訴我們還沒有配置通過什么規則來對我們的代碼進行校驗，參照eslint入門，我們執行./node_modules/.bin/eslint --init這個命令就可以了，選擇需要的校驗規則，這里我選擇的是standard模板。

然后，npm run beta，就會發現報錯信息了，提示你哪些代碼寫的是不對的。

但是這樣不適合我們的開發模式，需要不斷運行npm run beta，所以我們引入webpack-dev-server。

同樣是npm install webpack-dev-server --save-dev，然后配置devserver配置項。

const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'eslint.bundle.js'
    },

    devServer:{
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    // eslint options (if necessary) 
                    // fix : true
                }
            },
        ],
    },

    plugins:[
        new HtmlWebpackPlugin(),
    ]
};

 

在package.json的scripts中加入

"start": "webpack-dev-server",

至此，npm start 啟動項目。然后在網頁中打開 http://localhost:9000 就可以訪問本頁面了。