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

最新推荐文章于 2024-06-19 14:51:36 发布

siwangdexie_new

最新推荐文章于 2024-06-19 14:51:36 发布

阅读量1.4k

点赞数

文章标签： vscode 编辑器 vue.js

本文链接：https://blog.csdn.net/siwangdexie_copy/article/details/130102689

版权

本文介绍了如何在VSCode编辑器中配置eslint和prettier，以实现Vue.js、微信小程序项目的代码格式校验和自动格式化。详细讲述了基础配置、安装插件步骤，以及不同项目的个性化配置，如vue管理后台和微信小程序的特殊配置，解决prettier和eslint可能出现的冲突。

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

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

基础配置

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语法各有不同，在配置的时候，灵活变通

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'