工欲善其事必先利其器

前面用gulp 和 gulp-jshint 、sublimeText + jshint 檢測(cè)了代碼，但是需要自己編寫.jshintrc文件，一直想試一下airbub的編碼規(guī)范，但是奈何一直沒找到sublimeText配置的資料，今天來試一下webpack + eslint的組合使用airbub的編碼規(guī)范

新建項(xiàng)目

npm init

注意project name不能與需要依賴的包同名，否者安裝不上；比如project name為webpack安裝webpack時(shí)候會(huì)提示一下錯(cuò)誤

Refusing to install package with name "webpack" under a package
npm ERR! also called "webpack". Did you name your project the same
npm ERR! as the dependency you're installing?

webpack-dev-server搭建本地服務(wù)器

npm install webpack-cli -D
npm i webpack-dev-server -D

然后在項(xiàng)目根文件目錄下執(zhí)行命令即可開啟服務(wù)器

webpack-dev-server

安裝webpack

npm install webpack -g
npm i webpack -D

項(xiàng)目文件根目錄下新建webpack.config.js，代碼如下

module.exports = {
    // __dirname為node的變量，表示當(dāng)前所在的根目錄
    entry: __dirname + '/src/main.js',
    output: {
        path: __dirname + '/dest',
        filename: 'bundle.js'
    }
};

然后在根目錄下執(zhí)行命令webpack就會(huì)發(fā)現(xiàn)文件已經(jīng)打包好了，但是會(huì)有一個(gè)警告

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

根據(jù)顯示是mode未指定，在執(zhí)行webpack的時(shí)候可以指定mode有webpack --mode development開發(fā)模式與webpack --mode production生產(chǎn)模式；區(qū)別在于開發(fā)模式打包之后的代碼不壓縮，生產(chǎn)模式打包的代碼會(huì)被壓縮
也可直接在package.json里面指定命令

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "bulid": "webpack --mode production"
  },
...

但是在打包后的代碼中，es6的代碼并沒有轉(zhuǎn)換成es5

image.png

安裝babel-loader 與 babel-preset-es2015

webpack中使用bable-loader

npm install babel-loader babel-preset-es2015

然后在webpack.config.js配置module

module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            },
            exclude: /node_modules/
        }]
    }

再次執(zhí)行npm run dev發(fā)現(xiàn)代碼已被轉(zhuǎn)換成es5代碼

image.png

安裝eslint-loader

接著安裝eslint代碼檢查，webpack的插件都是放在module里面的loader模塊引入使用的

npm i eslint-loader -D

然后在webpack.config.js中配置

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        formatter: require('eslint-friendly-formatter') // 默認(rèn)的錯(cuò)誤提示方式
                    }
                },
                enforce: 'pre', // 編譯前檢查
                exclude: /node_modules/, // 不檢測(cè)的文件
                include: [__dirname + '/src'], // 要檢查的目錄
            }
        ]
    }

然后新建.eslintrc.js

module.exports = {
  root: true, // 作用的目錄是根目錄
  parserOptions: {
    sourceType: 'module' // 按照模塊的方式解析
  },
  env: {
    browser: true, // 開發(fā)環(huán)境配置表示可以使用瀏覽器的方法
  },
  rules: {
    // 自定義的規(guī)則
    "linebreak-style": [0 ,"error", "windows"],
    "indent": ['error', 4]
  }
}

配置詳見官網(wǎng)http://eslint.cn/docs/user-guide/

使用airbnb

安裝依賴包

npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

然后修改.eslintrc.js

module.exports = {
  root: true, // 作用的目錄是根目錄
  parserOptions: {
    sourceType: 'module' // 按照模塊的方式解析
  },
  env: {
    browser: true, // 開發(fā)環(huán)境配置表示可以使用瀏覽器的方法
  },
  extends: 'airbnb', // 導(dǎo)入airbnb規(guī)則
  rules: {
    // 自定義的規(guī)則
    "linebreak-style": [0 ,"error", "windows"],
    "indent": ['error', 4]
  }
}

然后執(zhí)行以下命令檢測(cè)

eslint --ext .js,.vue src

通過eslint命令可以查看參數(shù)列表，例如

eslint src //掃描src目錄下的.js文件
eslint --ext .js,.vue src // 掃描src下的.js與.vue后綴文件（默認(rèn)只掃描.js文件）
eslint --fix src // 修正src下面的.js文件格式錯(cuò)誤（會(huì)自動(dòng)調(diào)整文件）

使用standard

通常使用的插件有 airbnb 外還有 standard
如果不記得以上這么多依賴插件的話，可以先安裝

npm install -g eslint-config-standard

然后修改.eslintrc.js的 extends 參數(shù)
在執(zhí)行eslint src的時(shí)候會(huì)提示缺少的包，然后按照提示安裝就行