手动webpack vue项目的配置二

配置eslint 统一代码风格方便团队开发

1.安装eslint包和依赖
npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
2.创建一个文件.eslintrc

        {
        "extends":"standard",
        "plugins": [
        "html"
            ]
        }

3.需要识别vue内部的js
npm i eslint-plugin-html
4.package.json npm指令

    //1.lint 指定文件后缀和哪个文件夹下的文件
    //2.lint-fix 修复
        "scripts": {
        "lint": "eslint --ext .js --ext .jsx --ext .vue client/"
        "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"
        }

5.自动检查
npm i eslint-loader babel-eslint -D
5.1 .eslintrc 加入

"parser": "babel-eslint"

5.2 webpack.config.base.js 加入

        {
        test: /\.(vue|js|jsx)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        enforce: 'pre'
        // 预处理
      }

6.git提交前进行代码检验不通过无法提交
先初始代码仓库 git init 然后npm i husky -D

    "scripts": {
    "precommit": "npm run lint-fix"
        }

7.编辑插件使用快速开发
安装 EditorConfig for VS Code
创建 .editorconfig 文件 加入

root = true

[*]

charset = utf-8
end_of_line =  =lf
indent_size = 2
indent_style = space
# 最后一行自动加回车
insert_final_newline = true
# 最后一行有空格 自动清除
trim_trailing_whitespace = true

个人设置内加入下面的key
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
    "eslint.validate": [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },"html",
        "vue"
    ],