Vue typescript项目配置eslint+prettier

前言

本文基于

  • "vite": "^5.0.0"

1.安装依赖

安装 eslint

javascript 复制代码
yarn add eslint --dev

安装 eslint-plugin-vue

javascript 复制代码
yarn add eslint-plugin-vue --dev

主要用于检查 Vue 文件语法

安装 prettier 及相关插件

javascript 复制代码
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

安装 typescript 解析器、规则补充

javascript 复制代码
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

2.根目录创建 .eslintrc.cjs

javascript 复制代码
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'eslint-config-prettier',
    'plugin:prettier/recommended'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};

3.根目录创建 .prettierrc.cjs

javascript 复制代码
module.exports = {
  // 字符串是否使用单引号
  singleQuote: true,
  // 大括号首尾是否需要空格
  bracketSpacing: true,
  // 对象末尾是否需要逗号
  trailingComma: 'none',
  // 箭头函数参数括号(1个参数不需要, 1个以上需要)
  arrowParens: 'avoid',
  // 折行标准(默认)
  proseWrap: 'preserve',
  // 根据显示样式决定html是否折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符(crlf/lf/auto)
  endOfLine: 'auto'
};

4.配置 package.json 的 scripts 字段

javascript 复制代码
"scripts": {
   ...
   "lint": "eslint . --ext vue,ts --report-unused-disable-directives --max-warnings 0"
}

5.测试配置

javascript 复制代码
yarn lint

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

相关推荐
布兰妮甜15 小时前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
张志鹏PHP全栈17 小时前
TypeScript 第四天,TypeScript的编译选项(一)
前端·typescript
大菠萝学姐18 小时前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
Toomey19 小时前
别再用 Parameters 乱推断了!vue-i18n 封装 t 函数的正确姿势
typescript
黄焖鸡能干四碗19 小时前
系统安全设计方案,软件系统安全设计方案
开发语言·数据库·安全·vue·系统安全
郑板桥3020 小时前
ts学习1
学习·typescript
前端拿破轮1 天前
女朋友要和我分手?!!居然是因为交不出赎金信,不会用哈希表😭😭😭
算法·leetcode·typescript
知识分享小能手1 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
知识分享小能手1 天前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
张志鹏PHP全栈2 天前
TypeScript 第三天,TypeScript中的类型(二)
typescript