zoukankan      html  css  js  c++  java
  • 02 vue 项目配置eslint

    直接使用官方推荐的eslint-standard的npm包

    1.安装eslint-standard

    npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
    

    2.安装npm i eslint-plugin-html 

    此插件可以解析vue里面的js

    npm i eslint-plugin-html
    

    3.在项目的根目录增加 .eslintrc文件

    //.eslintrc
    { "extends": "standard", "plugins": ["html"] }

    4.在package.json里面配置相应的检测文件及目录

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "lint": "eslint --ext .js --ext .jsx --ext .vue client/", //运行此命令,用于检测
      "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/", // 运行此命令,进行自动修复代码的格式

    "clean": "rm -rf dist", "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js", "build": "npm run clean && npm run build:client", "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js" },

    5.配置写代码时候自动检测  

    npm i eslint-loader babel-eslint -D  

    .eslintrc增加配置:

    {
      "extends": "standard",
      "plugins": [
        "html"
      ],
      "parser": "babel-eslint"
    }
    

    webpack.congif.base.js增加配置

     rules: [
                {
                    test: /.(vue|js|jsx)$/,
                    loader: 'eslint-loader',
                    exclude:/node_modules/,
                    enforce:"pre" //vue-loader处理之前,进行预处理
                }
    ]
    

    6.重新运行项目,改动代码,体验eslint的作用

      

      

     

      

     

  • 相关阅读:
    Git
    Entropy, relative entropy and mutual information
    2021.5.3 团队冲刺第六天
    2021.5.2 团队冲刺第五天
    2021.5.1 团队冲刺第四天
    2021.4.30 团队冲刺第三天
    2021.4.29 团队冲刺第二天
    2021.4.28 团队冲刺第一天
    2021.4.27
    2021.4.26
  • 原文地址:https://www.cnblogs.com/ipoodle/p/11028762.html
Copyright © 2011-2022 走看看