学习Vue3 配置Prettier忽略设置与Eslint的配置_source.fixall": "explicit-CSDN博客

本文介绍了在使用Vue3时如何配置Eslint和prettier，包括关闭默认插件、VSCode设置、自定义代码格式和Eslint规则，以及处理可能的冲突和全局变量设置。

刚学习Vue3，对于Eslint与prettier的默认配置做一下笔记

Eslint规范配置与默认保存格式化

1、关闭扩展插件Prettier与Prettier ESLint
2、安装 Eslint插件
3、点击vscode右下角，找到设置，选择代码模式
在这里插入图片描述
4、复制以下代码

	"editor.codeActionsOnSave":{
		"source.fixAll": "explicit"
	},
	"editor.formatOnSave":false,

在这里插入图片描述
有冲突的话，保留现在的。

代码格式化设置忽略与日常规范配置

1、打开eslintrc.js
在这里插入图片描述
复制以下代码

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, //无分号
        printWidth: 80, //每行宽度至多80字符
        trailingComma: 'none', //不加对象|数组最后逗号
        endOfLine: 'auto' //换行符号不限制
      }
    ],
    // Eslint规范
    'vue/multi-word-component-names': [         
      'warn',
      {
        ignores: ['index'] //vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], //关闭props 解构的检验(props解构会丢失响应式)
    'no-undef': 'error'
  },
  //2013.12.15更新，加一个消息忽略配置校验,跟rules并列同级
    globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }