vue-cli3项目配置自动eslint代码格式化校验

最新推荐文章于 2024-08-09 09:48:41 发布

祖传做年糕

最新推荐文章于 2024-08-09 09:48:41 发布

阅读量2.5k

点赞数 2

分类专栏： eslint vuejs框架前端团队文章标签： vue

本文链接：https://blog.csdn.net/biraotian/article/details/114068420

版权

本文介绍了如何在Vue CLI3项目中配置eslint进行代码格式化和校验，包括安装依赖、创建.eslintrc.js配置文件、.eslintignore文件以忽略不必要的检测，以及在vue.config.js中开启lintOnSave。同时，还指导了VSCode安装eslint和vetur插件，并设置自动格式化规则。

摘要由CSDN通过智能技术生成

vue-cli3项目配置自动eslint代码格式化校验
为了使得代码更加规范以及更易读，需要规范前端团队成员的eslint和vscode setting，现在记录下我们需要做的具体方法。

安装依赖
在cmd中打上把相应的依赖加到devDependencies下，再npm install对应依赖。
在package.json文件加上相应依赖：

"eslint-plugin-html": "^6.0.3",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/eslint-config-standard": "^4.0.0",
"eslint": "5.0.0",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "4.7.1",

eslint配置方法
eslint的规则有三个选项：

"off"或者0，不启用这个规则
"warn"或者1，出现问题会有警告
"error"或者2，出现问题会报错

在根目录创建.eslintrc.js，代码如下：

module.exports = {
   
  // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有   "root": true，它就会停止在父级目录中寻找。
  root: true,
  parserOptions: {
   
    // 对Babel解析器的包装使其与 ESLint 兼容。
    parser: 'babel-eslint',
    // 代码是 ECMAScript 模块
    sourceType: 'module'
  },
  env: {
   
     // 预定义的全局变量，这里是浏览器环境
    browser: true,
    node: true,
    es6: true,
  },
  // 扩展风格
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
  // 规则的细节请到ESLint官方网站查看http://eslint.org/docs/rules/
  rules: {
   
    "vue/max-attributes-per-line": [2, {
   
      "singleline": 10,
      "multiline": {
   
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/name-property-casing": ["error", "PascalCase"],
    // 定义对象的set存取器属性时，强制定义get
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
   
      'before': true,
      'after': true
    }],
    // 禁止或强制在单行代码块中使用空格
    'block-spacing': [2, 'always'],
    // 强制使用一致的缩进 第二个参数为 "tab" 时，会使用tab
    'brace-style': [2, '1tbs', {
   
      'allowSingleLine': true
    }],
    // 双峰驼命名格式
    'camelcase': [0, {
   
      'properties': 'always'
    }],
    //  数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号
    'comma-dangle': [2, 'never'],
    // 控制逗号前后的空格
    'comma-spacing': [2, {
   
      'before': false,
      'after': true
    }],
    // 控制逗号在行尾出现还是在行首出现 (默认行尾)
    'comma-style': [2, 'last'],
    // 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示
    'constructor-super'