eslint的使用及自定义规则配置

最新推荐文章于 2024-09-27 08:25:23 发布

Hell to pay

最新推荐文章于 2024-09-27 08:25:23 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fujianwonton/article/details/123106568

版权

本文介绍了如何在VSCode中安装和配置ESLint与Prettier插件，强调了如何创建`.eslintrc.js`文件来设定自定义校验规则。同时，讲解了在`settings.json`中禁用或启用eslint的方法，以及如何在代码中进行局部禁用的注释方式。

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

vscode安装【eslint】和【prettier】插件
在项目中添加【.eslintrc.js】文件，并添加下面的自定义校验规则

module.exports = {
   
  root: true,
  parserOptions: {
   
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
   
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
   
    "vue/max-attributes-per-line": [2, {
   
      "singleline": 10,
      "multiline": {
   
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline":"off",
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/no-v-html": "off",
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
   
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
   
      'allowSingleLine': true
    }],
    'camelcase': [0, {
   
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
   
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2, 'multi-line'