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。

 1 const path = require('path'); 
 2 let HtmlWebpackPlugin = require('html-webpack-plugin')
 3 module.exports = {
 4     entry: './index.js',
 5     output: {
 6         path: path.resolve(__dirname, 'dist'),
 7         filename: 'eslint.bundle.js'
 8     },
 9     plugins:[
10         new HtmlWebpackPlugin(),
11     ]
12 };

 

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

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

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

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

 1 const path = require('path');
 2 let HtmlWebpackPlugin = require('html-webpack-plugin')
 3 module.exports = {
 4     entry: './index.js',
 5     output: {
 6         path: path.resolve(__dirname, 'dist'),
 7         filename: 'eslint.bundle.js'
 8     },
 9     module: {
10         rules: [
11             {
12                 test: /\.js$/,
13                 exclude: /node_modules/,
14                 loader: "eslint-loader",
15                 options: {
16                     // eslint options (if necessary) 
17                     // fix : true
18                 }
19             },
20         ],
21     },
22     plugins:[
23         new HtmlWebpackPlugin(),
24     ]
25 };

 

而後嘗試一下，在文件根目錄建立一個index.js，而後npm run beta 運行，

1 class EslintDemo{
2   func1(){
3     console.log('ddddd')
4   };
5 };
6 
7 var EslintDemoSample = new EslintDemo();
8 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配置項。

 1 const path = require('path');
 2 let HtmlWebpackPlugin = require('html-webpack-plugin')
 3 
 4 module.exports = {
 5     entry: './index.js',
 6 
 7     output: {
 8         path: path.resolve(__dirname, 'dist'),
 9         filename: 'eslint.bundle.js'
10     },
11 
12     devServer:{
13         contentBase: path.join(__dirname, "dist"),
14         compress: true,
15         port: 9000
16     },
17 
18     module: {
19         rules: [
20             {
21                 test: /\.js$/,
22                 exclude: /node_modules/,
23                 loader: "eslint-loader",
24                 options: {
25                     // eslint options (if necessary) 
26                     // fix : true
27                 }
28             },
29         ],
30     },
31 
32     plugins:[
33         new HtmlWebpackPlugin(),
34     ]
35 };

 

在package.json的scripts中加入

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

至此，npm start 啓動項目。而後在網頁中打開 http://localhost:9000 就能夠訪問本頁面了。