Vue3+TS项目中eslint、prettier安装配置详细指南
更新时间：2024年07月17日 10:50:19 作者：小迟前端
为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下
前言
eslint和prettier的作用主要为：可以规范团队的代码风格。在实际项目中，团队的每个成员的编码习惯都不同，这极有可能造成，一个项目多个代码风格，这会造成代码阅读困难，后期维护难度大灯问题，这就需要配置下eslint和prettier。
1.eslint
1.安装依赖
首先我们需要先安装 @eslint/create-config 插件：
pnpm install -D @eslint/create-config
提示我未安装eslint，按y，回车安装
Need to install the following packages: eslint@8.57.0 Ok to proceed? (y) y
接下来执行初始化。
npx eslint --init
接下来会有弹出一些问题，可根据自身项目情况进行回答，期间会询问是否需要安装相应插件，y->回车。
2.配置eslintrc
会在项目根目录下生成.eslintrc.cjs文件，然后对项目进行自己需要的配置
module.exports = {
// 使 eslint 支持 node 与 ES6
env: {
browser: true,
es2021: true,
node: true
},
// 引入推荐的语法校验规则
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
overrides: [],
// 这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser
// 先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码
// 选择使用的解析器
parser: 'vue-eslint-parser',
// 解析器的详细配置
parserOptions: {
// 使用最新版 ES 语法
ecmaVersion: 'latest',
// 使用 ESLint TS 解析器
parser: '@typescript-eslint/parser',
// 使用 ES 模块化规范
sourceType: 'module'
},
// 使用的插件
plugins: ['vue', '@typescript-eslint'],
// 自定义规则
rules: {
'@typescript-eslint/no-unused-vars': 'off',
indent: [
'error',
4,
{
SwitchCase: 1
}
],
'vue/multi-word-component-names': [
'error',
{
ignores: ['index', 'Header'] //需要忽略的组件名
}
],
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-explicit-any': 'off',
semi: 'off',
'@typescript-eslint/no-this-alias': 'off',
'eslintno-debugger': 'off',
'vue/no-unused-vars': 'off',
'vue/no-template-shadow': 'off',
'vue/require-v-for-key': 'off',
'vue/no-textarea-mustache': 'off',
'vue/no-v-html': 'off'
}
};3.配置下忽略文件eslintignore
在根目录下创建.eslintignore文件，排除一些文件夹
node_modules *.md .vscode .idea dist /public /docs .husky .local /bin Dockerfile .eslintrc.js
4.配置package.json
然后配置下package.json中的启动命令，这样便可以执行 pnpm run lint:fix 来进行自动格式化代码。
"scripts": {
"dev": "vite --open",
"test": "echo \"Error: no test specified\" && exit 1",
"eslint:fix": "eslint --fix"
},2 prettier
1.安装 prettier 依赖
pnpm install -D prettier
pnpm install -D eslint-config-prettier eslint-plugin-prettier
2.创建.prettierrc.js 文件
module.exports = {
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "all",
"tabWidth": 2,
"printWidth": 100,
"useTabs": false,
"bracketSameLine": true,
"arrowParens": "always",
"vueIndentScriptAndStyle": false,
"singleAttributePerLine": false
}3.创建 .prettierignore 文件
dist/ node_modules/ .vscode/ .idea/ /public/* .local **/*.svg **/*.sh
4.配置package.json
{
"scripts": {
"lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}"
}
}附：如果ESLint和Prettier在某些规则上有冲突，。比如方法名和后面的括号之间的空格问题。ESLint 规则是添加空格，Prettier则是不添加空格
此时可以考虑在ESlint配置文件中关闭相关检测规则。
1、打开 .eslintrc.js 配置文件
2、在 rules 规则下，新增一条规则
'space-before-function-paren': 'off'
3、重启项目
至此，你即可在 VSCode 保存时，自动格式化代码！
总结
到此这篇关于Vue3+TS项目中eslint、prettier安装配置的文章就介绍到这了,更多相关eslint、prettier安装配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vue 的响应式系统中,依赖收集是贯穿整个数据驱动视图的核心环节,本文将从 Vue 2 的源码出发,层层拆解依赖收集的完整流程,带你从 “使用层” 走向 “原理层”,真正理解 Vue 响应式的底层逻辑2026-03-03
本篇文章主要介绍了Vue中保存用户登录状态实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。、2017-06-06
在日常运维和开发工作中,服务器监控是必不可少的环节,市面上有不少优秀的监控方案,但对于中小型团队或个人开发者来说,这些工具往往过于复杂,学习成本较高,本文将介绍我自己开发的 ServWatch 监控系统——一个轻量级、易部署、界面美观的实时监控解决方案2026-02-02
这篇文章主要介绍了Vue-cli3多页面配置详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了watch里面的deep和immediate作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Vue中$on和$emit的实现原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
虚拟列表是一种优化长列表渲染的技术,它可以在保持流畅性的同时,渲染大量的数据,本文主要介绍了如何使用vue手写一个虚拟列表,感兴趣的可以了解下2024-04-04
这篇文章主要介绍了Vue 实现显示/隐藏层的思路（加全局点击事件）,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue传值的编码和解码方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
今天小编就为大家分享一篇vue click.stop阻止点击事件继续传播的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论