vscode编辑器，vue、小程序等语言适配eslint格式校验 + prettier 保存时自动修改格式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vscode编辑器，vue、小程序等语言适配eslint格式校验 + prettier 保存时自动修改格式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目的：自留备份，用者自取

基础配置

1 基于vscode编辑器，prettier插件需要下载
2 eslint配置项规则：
https://eslint.bootcss.com/docs/rules/
3 prettier配置项规则：
https://prettier.io/docs/en/options.html

安装插件

"devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-prettier": "^4.2.1"
  }

配置文件问题：
如果项目中带有.vscode文件夹，这里面的setting.json会覆盖全局的setting.json，这样对vscode编辑器做的配置，会被覆盖掉。同样，如果不想修改vscode的全局配置，也可以在这里做个性化的配置。

.vscode -> settings.json 配置项

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 每次保存的时候自动格式化
  "editor.formatOnSave": true,
  "javascript.format.enable": true,
  // 让函数(名)和后面的括号之间取消空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  "explorer.confirmDelete": false,
  // 启用保存时自动修复eslint,默认只支持.js文件
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 保存时格式自动对齐
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 用eslint的规则检测js文件
  "eslint.validate": ["javascript"]
}

prettierrc.js配置项

module.exports = {
  // prettier的配置
  printWidth: 80, // 每行最多多少个字符换行
  tabWidth: 2, // tab缩进大小,默认为2
  useTabs: false, // 使用tab缩进，默认false
  semi: false, // 使用分号, 默认true
  singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
  quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
  jsxSingleQuote: false, // 单引号
  trailingComma: 'all', // 行尾逗号
  bracketSpacing: true, // 花括号内填充空格 { a: 23 }
  bracketSameLine: false, // 最后的尾尖括号（>）放在同一行还是换行
  arrowParens: 'avoid', // 箭头函数一个参数是否使用括号包裹参数
  eslintIntegration: true, // #让prettier使用eslint的代码格式进行校验
}

eslintrc.js配置项

这部分可变化的空间很大，可繁可简，微信小程序开发的时候还可以加配wxml格式校验，常规vue、wx小程序、egg.js、nuxt.js语法各有不同，在配置的时候，灵活变通文章来源地址https://www.toymoban.com/news/detail-709491.html

vue管理后台（框架带的，配置比较详细，很多内容规定很严格）

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'vue-global-api',
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: {
      js: 'espree',
      ts: '@typescript-eslint/parser',
      '<template>': 'espree',
    },
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      tsx: true,
    },
    warnOnUnsupportedTypeScriptVersion: false,
  },
  rules: {
    'no-undef': 'off',
    'no-console': 'off',
    'no-debugger': 'off',
    'prettier/prettier': 'warn',
    'prefer-template': 'error',
    'vue/no-reserved-component-names': 'off',
    '@typescript-eslint/no-this-alias': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    'vue/no-v-html': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'any',
          normal: 'any',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
    // 多字组件名称
    'vue/multi-word-component-names': 'off',
    // Vue.js风格指南(https://cn.vuejs.org/v2/style-guide/)
    // Vue组件排序
    'vue/order-in-components': [
      'warn',
      {
        order: [
          'el',
          'name',
          'key',
          'parent',
          'functional',
          ['delimiters', 'comments'],
          ['components', 'directives', 'filters'],
          'extends',
          'mixins',
          ['provide', 'inject'],
          'ROUTER_GUARDS',
          'layout',
          'middleware',
          'validate',
          'scrollToTop',
          'transition',
          'loading',
          'inheritAttrs',
          'model',
          ['props', 'propsData'],
          'emits',
          'setup',
          'fetch',
          'asyncData',
          'data',
          'head',
          'computed',
          'watch',
          'watchQuery',
          'LIFECYCLE_HOOKS',
          'methods',
          ['template', 'render'],
          'renderError',
        ],
      },
    ],
    // Vue属性排序
    'vue/attributes-order': [
      'warn',
      {
        order: [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          'UNIQUE',
          'TWO_WAY_BINDING',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT',
        ],
        alphabetical: true, //字母顺序
      },
    ],
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
}

微信小程序（自配，同时夹杂对wxml的校验）

module.exports = {
  root: true,
  // 标记当前代码最终的运行环境
  env: {
    es2021: true,
    node: true,
  },
  // 设置多个共享配置
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  overrides: [
    {
      files: ['*.js'],
      rules: {
        'no-unused-vars': 'error',
        'no-console': 'off',
        'generator-star-spacing': 'off', // 强制 generator 函数中 * 号周围使用一致的空格
        // 'no-mixed-operators': 'error', // 禁止混合使用不同的操作符，用括号区分开来
        quotes: [
          // 改双引号为单引号
          'error',
          'single',
          {
            avoidEscape: true, // 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义
            allowTemplateLiterals: true, // 允许字符串使用反勾号
          },
        ],
        semi: [
          // 去结尾分号
          2,
          'never',
          {
            beforeStatementContinuationChars: 'never',
          },
        ],
        'no-delete-var': [2],
        'object-curly-spacing': ['error', 'always'], // 强制在花括号中使用一致的空格
        'array-bracket-spacing': ['error', 'never'], // 禁止或强制在括号内使用空格
        'array-bracket-newline': ['error', { multiline: true }], // 强制数组元素间出现换行 (array-element-newline)
        'eol-last': ['error', 'always'], // 要求或禁止文件末尾保留一行空行 (eol-last)
        'func-call-spacing': ['error', 'never'], // 要求或禁止在函数标识符和其调用之间有空格
        'space-before-function-paren': [
          'error',
          {
            anonymous: 'always',
            named: 'never',
            asyncArrow: 'always',
          },
        ], // 要求或禁止函数圆括号之前有一个空格
        indent: ['error', 2], // 强制在对象字面量的键和值之间使用一致的空格
        'key-spacing': ['error', { beforeColon: false }],
        'keyword-spacing': ['error', { before: true }], // 强制关键字周围空格的一致性
        // 'linebreak-style': ['error', 'windows'], // 强制使用一致的换行符风格
        'no-trailing-spaces': 'error', // 禁用行尾空白
        'no-whitespace-before-property': 'error', // 禁止属性前有空白
        'semi-spacing': 'error', // 强制分号前后有空格
        'space-before-blocks': 'error', // 要求或禁止语句块之前的空格
        'space-in-parens': ['error', 'never'], // 禁止或强制圆括号内的空格
        'space-infix-ops': 'error', // 要求中缀操作符周围有空格
        'switch-colon-spacing': 'error', // 强制在 switch 的冒号左右有空格,
        'comma-spacing': ['error', { before: false, after: true }],
        'dot-notation': ['error'], // 强制尽可能地使用点号
        // 'eqeqeq': ['error', 'always'], // 要求使用 === 和 !==
        'no-dupe-keys': 'error', // 禁止对象字面量中出现重复的 key
        'arrow-spacing': 'error', // es6箭头函数空格
      },
    },
    {
      files: ['*.wxml'],
      plugins: ['wxml'],
      // processor: 'wxml/wxml',
      parser: '@wxml/parser',
      rules: {
        'wxml/no-dot-this-in-wx-key': 'error', // 禁止使用this作为key
        'wxml/empty-tag-self-closing': 'error', // 强制空标签自闭合
        'wxml/event-binding-style': ['error', 'no-colon'], // 强制事件绑定样式 colon: bind:tap no-colon bindtap
        'wxml/max-len': 'error', // 设置单行代码最大宽度
        'wxml/no-duplicate-attributes': 'error', // 禁止使用重复的属性
        'wxml/no-inconsistent-tagname': 'error', // 禁止不配对的标签名
        'wxml/no-inline-wxs': 'error', // 禁止使用内联wxs
        'wxml/no-unexpected-string-bool': 'error', // 禁止使用布尔字符串 关键字需要在双引号之内
        'wxml/no-vue-directive': 'error', // 禁止在微信小程序里错误的使用vuejs指令
        'wxml/no-wx-for-with-wx-if': 'error', // 禁止wx:for和wx:if|wx:elseif|wx:else在同一个标签使用
        'wxml/report-wxml-syntax-error': 'error', // 允许提示wxml语法错误
        'wxml/report-wxs-syntax-error': 'error', // 允许提示内联wxs里的js语法错误
        'wxml/wx-key': 'error', // wx:for循环时必须声明wx-key
      },
    },
  ],
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    requirePlugin: true,
    requireMiniProgram: true,
  },
}

其他，删删减减的，自己看着办吧，如果出现冲突，改其中一个，适配到另一个（prettier和eslint冲突，修改eslint适配prettire或者反过来）

/*
 * Eslint config file
 * Documentation: https://eslint.org/docs/user-guide/configuring/
 * Install the Eslint extension before using this feature.
 */
module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  ecmaFeatures: {
    modules: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      modules: true,
      spread: true,
      restParams: true,
    },
  },
  globals: {
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    requirePlugin: true,
    requireMiniProgram: true,
  },
  extends: 'eslint:recommended',
  rules: {
    'no-unused-vars': 'error',
    'no-console': 'off',
    'generator-star-spacing': 'off', // 强制 generator 函数中 * 号周围使用一致的空格
    // 'no-mixed-operators': 'error', // 禁止混合使用不同的操作符，用括号区分开来
    quotes: [
      // 改双引号为单引号
      'error',
      'single',
      {
        avoidEscape: true, // 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义
        allowTemplateLiterals: true, // 允许字符串使用反勾号
      },
    ],
    semi: [
      // 去结尾分号
      2,
      'never',
      {
        beforeStatementContinuationChars: 'never',
      },
    ],
    'no-delete-var': [2],
    'object-curly-spacing': ['error', 'always'], // 强制在花括号中使用一致的空格
    'array-bracket-spacing': ['error', 'never'], // 禁止或强制在括号内使用空格
    'array-bracket-newline': ['error', { multiline: true }], // 强制数组元素间出现换行 (array-element-newline)
    'eol-last': ['error', 'always'], // 要求或禁止文件末尾保留一行空行 (eol-last)
    'func-call-spacing': ['error', 'always'], // 要求或禁止在函数标识符和其调用之间有空格
    indent: ['error', 2], // 强制在对象字面量的键和值之间使用一致的空格
    'key-spacing': ['error', { beforeColon: false }],
    'keyword-spacing': ['error', { before: true }], // 强制关键字周围空格的一致性
    // 'linebreak-style': ['error', 'windows'], // 强制使用一致的换行符风格
    'no-trailing-spaces': 'error', // 禁用行尾空白
    'no-whitespace-before-property': 'error', // 禁止属性前有空白
    'semi-spacing': 'error', // 强制分号前后有空格
    'space-before-blocks': 'error', // 要求或禁止语句块之前的空格
    'space-before-function-paren': ['error', 'always'], // 要求或禁止函数圆括号之前有一个空格
    'space-in-parens': ['error', 'never'], // 禁止或强制圆括号内的空格
    'space-infix-ops': 'error', // 要求中缀操作符周围有空格
    'switch-colon-spacing': 'error', // 强制在 switch 的冒号左右有空格,
    'comma-spacing': ['error', { before: false, after: true }],
    'dot-notation': ['error'], // 强制尽可能地使用点号
    // 'eqeqeq': ['error', 'always'], // 要求使用 === 和 !==
    'no-dupe-keys': 'error', // 禁止对象字面量中出现重复的 key
    'arrow-spacing': 'error', // es6箭头函数空格
  },
}