二、手把手教你创建Vue3后台模板─────VSCode+Eslint+Prettier配置

插件准备

eslint

使用 eslint 需要安装 eslint 插件，并在项目第一次打开时 allow 同意使用本机的 eslint ：

prettier

使用 prettier 需要安装相应的插件：

 

1、安装eslint依赖

npm install eslint --save-dev

 初始化eslint

 npx eslint --init

 根据提示选择合适自己的选项，初始化完成之后项目中会出现eslintrc.js目录，

接下来对.eslintrc.js文件进行配置

// eslint-disable-next-line no-undef
module.exports = {
  env: {
    browser: true,
    es2021: true,
    "vue/setup-compiler-macros": true,
  },
  parser: "vue-eslint-parser",
  extends: ["eslint:recommended", "plugin:vue/vue3-essential", "@vue/prettier"],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue"],
  rules: {
    'prettier/prettier': ['error', { singleQuote: true }],
    "no-console": import.meta.env.MODE === "production" ? "warn" : "off",
    "no-debugger": import.meta.env.MODE === "production" ? "warn" : "off",
  },
  overrides: [],
};

安装prettier依赖

3个依赖prettier、eslint-plugin-prettier、@vue/eslint-config-prettier

npm install prettier eslint-plugin-prettier @vue/eslint-config-prettier --save-dev

在package.json同级的根目录新建 .prettierrc.js，兼容格式化规则

module.exports = {
  printWidth: 300, // 行长规则通常设置为100或120
  tabWidth: 2, // tab缩进大小, 默认为2
  useTabs: false, // 使用tab缩进, 默认false
  semi: false, // 行末分号, 默认true
  singleQuote: true, // 使用单引号, 默认false
  trailingComma: 'none', // 结尾是否强制添加逗号，默认none, 可选 none|es5|all
  endOfLine: 'auto', // 定义结尾换行符 \n \r \n\r，默认auto
  disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  jsxSingleQuote: false, // jsx中是否使用单引号, 默认false
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行, 默认false
  arrowParens: "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号, avoid: 省略括号
}

VSCode配置

打开vscode，左上角标签 文件-首选项-设置，输入settings回车搜索，点击进入settings.json文件

settings.json文件配置：

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "cSpell.userWords": ["vite", "vuex"], // 是一个检测语法拼写的插件的用户自定义库，用于处理一些自定义词汇合法性
  "workbench.iconTheme": "vscode-icons", // 图标
  "editor.formatOnSave": false, // 保存时格式化
  "editor.formatOnPaste": false, // 粘贴时自动格式化
  "vsicons.dontShowNewVersionMessage": true, // 不再显示vscode新版本信息
  "window.zoomLevel": 1, // 窗口缩放比率
  "security.workspace.trust.untrustedFiles": "open", // 允许打开不信任文件
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "volar.splitEditors.layout.right": ["template", "customBlocks"],
  "emmet.triggerExpansionOnTab": true,
  "volar.autoCompleteRefs": true
}

package.json添加一下lint格式化

  "scripts": {
    "lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix"
  }

总结

总的来看,强烈推荐使用 prettier 进行代码格式化。

经过以上配置VSCode+Eslint+Prettier已经很很好的兼容了，刚配置完没生效的话，重启一下vscode就好了，配置的过程中有问题的话，欢迎评论区提问