Vue3+TypeScript 项目中,配置 ESLint 和 Prettier
接上篇:从0搭建vite-vue3-ts项目框架:配置less+svg+pinia+vant+axios
文档同步项目gitee:https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git
一、Eslint:用于检测代码
安装eslint相关依赖
yarn add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
eslint-plugin-vue:仅支持vue,提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验
@typescript-eslint/parser:解析器,让ESLint拥有规范TypeScript代码的能力
@typescript-eslint/eslint-plugin:插件,包含一系列TypeScript的ESint规则
初始化eslint
npx eslint --init
选择项目eslint配置,回车确认,空格多选
√ How would you like to use ESLint? · style 你希望怎样使用eslint
√ What type of modules does your project use? · esm 你的项目使用什么模块
√ Which framework does your project use? · vue 项目框架
√ Does your project use TypeScript? · No / Yes 是否使用typescript
√ Where does your code run? · browser, node 代码运行在哪
√ How would you like to define a style for your project? · guide 项目样式
√ Which style guide do you want to follow? · standard-with-typescript 项目风格
√ What format do you want your config file to be in? · JavaScript 配置文件格式
√ Would you like to install them now? · No / Yes 确认是否安装
√ Which package manager do you want to use? · yarn 安装方式
安装完成,项目根目录生成.eslintrc.cjs文件
// .eslintrc.cjs module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/vue3-essential',
'standard-with-typescript'
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
在.eslintrc.cjs rules中配置eslint规则细节
rules配置eslint官网:https://eslint.org/docs/latest/rules/
腾讯云开发社区中文文档:https://cloud.tencent.com/developer/doc/1078
常用规则,参考:https://blog.csdn.net/ivenqin/article/details/104673237/
eslint-plugin-vue rules:https://eslint.vuejs.org/rules/
我的rules:
rules: {
"vue/no-v-html": "off",
"vue/script-setup-uses-vars": "off",
"@typescript-eslint/ban-ts-ignore": "off",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/no-empty-function": "off",
"vue/custom-event-name-casing": "off",
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
},
],
"no-unused-vars": [
"error",
{
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
},
],
"space-before-function-paren": "off", "vue/attributes-order": "off",
"vue/one-component-per-file": "off",
"vue/html-closing-bracket-newline": "off",
"vue/max-attributes-per-line": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/singleline-html-element-content-newline": "off",
"vue/attribute-hyphenation": "off",
"vue/require-default-prop": "off",
"vue/require-explicit-emits": "off",
"vue/html-self-closing": [
"error",
{
html: {
void: "always",
normal: "never",
component: "always",
},
svg: "always",
math: "always",
},
],
"vue/multi-word-component-names": "off",
"vue/no-parsing-error": ["off"],
"eol-last": "off",
},
二、Prettier:用于格式化代码
安装prettier相关依赖
yarn add prettier eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier -D
eslint-config-prettier:解决eslint和prettier冲突
eslint-config-prettier:将prettier作为eslint规则
stylelint-config-prettier:关闭所有不必要的或者有可能与Prettier冲突的规则
修改.eslintrc.cjs,配置prettier
extends: [
"plugin:prettier/recommended",
],
plugins: ["prettier"],
rules: {
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
}
修改package.json,配置修复项目格式命令
"scripts": {
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .ts --ext .d.ts --ext .vue src/"
},
或直接
"scripts": {
"lint-fix": "eslint . --fix"
},
执行命令,yarn lint-fix,项目按照eslint-prettier规则进行代码格式化
配置完成!
Vue3+TypeScript 项目中,配置 ESLint 和 Prettier的更多相关文章
- 使用vscode开发vue cli 3项目,配置eslint以及prettier
初始化项目时选择eslint-config-standard作为代码检测规范,vscode安装ESLint和Prettier - Code formatter两个插件,并进行如下配置 { " ...
- Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
- eslint配置介绍-如何在uniapp中配置eslint
eslint uniapp-eslint及vue-eslint配置 ESLint 是一个开源的 JavaScript 代码检查工具.可以让程序员在编码的过程中发现问题而不是在执行的过程中. 1. es ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 我是如何在公司项目中使用ESLint来提升代码质量的
ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...
- 在VSCode中配置Eslint格式化
在VSCode中配置Eslint 格式化时使代码保持Eslint语法规范 安装Eslint以及prettier美化插件 在VSCode配置设置项中添加如下代码 { "workbench.co ...
- vue-webpack所构建好的项目中增加Eslint
首先在package.json中配置eslint模块: 在终端运行命令:npm install 然后在build文件夹中web pack.base.conf.js配置eslint 接下来在在项目中新建 ...
- webpack中配置eslint
首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...
- Vue3+Vue-cli4项目中使用腾讯滑块验证码
Vue3+Vue-cli4项目中使用腾讯滑块验证码 简介: 滑块验证码相比于传统的图片验证码具有以下优点: 验证码的具体验证不需要服务端去验证,服务端只需要核验验证结果即可. 验证码的实现不需要我们去 ...
- 在TypeScript项目中进行BDD测试
在TypeScript项目中进行BDD测试 什么是BDD? BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距: 鼓励跨角色协 ...
随机推荐
- Vue中常用的几种传值方式
Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...
- python3使用libpcap库进行抓包及数据处理
python版本:python 3.9 libpcap版本:1.11.0b7 python libpcap库是底层绑定c语言libpcap库的开发包,旨在提供python应用可访问的unix c li ...
- Python基础之函数:5、内置函数、迭代器对象、异常的捕获和处理
目录 一.重要内置函数 1.zip() 2.filter() 3.sorted() 二.常见内置函数 1. abs() 2.all.any() 3.bin.oct.hex.int() 4.bytes( ...
- vue使用elementUI组件提交表单(带图片)到node后台
1.方法一(图片与表单分开,请求2次) 1.1 前台代码 // elementUI表单 <el-form ref="form" class="forms" ...
- Golang 实现时间戳和时间的转化
何为时间戳: 时间戳是使用数字签名技术产生的数据,签名的对象包括了原始文件信息.签名参数.签名时间等信息.时间戳系统用来产生和管理时间戳,对签名对象进行数字签名产生时间戳,以证明原始文件在签名时间之前 ...
- 原来 GitHub 不仅能学代码,还有这些东西
我是风筝,公众号「古时的风筝」,专注于 Java技术 及周边生态. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 大家好,我是风筝. 今天介绍几 ...
- 协程Part1-boost.Coroutine.md
首先,在计算机科学中 routine 被定义为一系列的操作,多个 routine 的执行形成一个父子关系,并且子 routine 一定会在父 routine 结束前结束,也就是一个个的函数执行和嵌套执 ...
- ArcObjects SDK开发 005 ArcObjects SDK中的插件式架构
1.什么是插件式架构 插件式架构设计中主要包括三个重要部分,宿主.插件协议以及插件实现.宿主是指使用插件的部分,该模块可以是一个类,也可以是多个接口和类组成的模块.插件协议是指宿主与插件之间的协议,宿 ...
- nginx配置文件讲解及示例(可复制)
详细的配置说明参考:https://www.cnblogs.com/ghl1024/p/9013805.html [示例一] #运行用户user www-data; #启动进程,通常设置成和cpu ...
- 【重难点】函数式接口、函数式编程、匿名内部类、Lambda表达式、语法糖
一.函数式接口 1.概念 仅有一个抽象方法的接口 适用于函数式编程(Lambda表达式) 常见:Runnable.Comparator<>.生产型接口Producer的get方法.消费型接 ...