2022 Vite vue3 加入 EsLint+prettier

不近又不远

已于 2022-09-04 16:28:29 修改

阅读量405

点赞数

文章标签： vue.js javascript 前端

于 2022-09-04 16:26:11 首次发布

本文链接：https://blog.csdn.net/ShanHeng886/article/details/126690913

版权

该博客详细介绍了如何使用Vite创建一个Vue3项目，并集成Prettier和ESLint进行代码风格和质量控制。首先通过`yarn create vite`命令初始化项目，然后安装Prettier及相关配置，接着安装和配置ESLint及@typescript-eslint解析器，最后展示了.eslintrc.cjs配置文件的内容，确保了项目的规范性和可维护性。

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

1、使用vite创建一个项目

yarn create vite project-name --template vue-ts

2、集成 prettier

1、安装

pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

2、根目录建.prettierrc.json,并写入

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

3、集成 eslint

pnpm i eslint eslint-plugin-vue --save-dev

并安装 @typescript-eslint/parser 替代掉默认的解析器

pnpm install @typescript-eslint/parser --save-dev

安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充

pnpm install @typescript-eslint/eslint-plugin --save-dev

初始化

npx eslint --init

配置文件： .eslintrc.cjs

module.exports = {
  parser: 'vue-eslint-parser',

  parserOptions: {
      parser: '@typescript-eslint/parser',
      ecmaVersion: 2020,
      sourceType: 'module',
      ecmaFeatures: {
          jsx: true,
      },
  },

  extends: [
      'plugin:vue/vue3-recommended',
      'plugin:@typescript-eslint/recommended',
      'prettier',
      'plugin:prettier/recommended',
  ],

  rules: {
      // override/add rules settings here, such as:
      // 关闭名称校验
      'vue/multi-word-component-names': 'off',
      'no-var': 'error', // 禁止使用 var
  },
};