uniapp配置eslint、typescript-eslint

最新推荐文章于 2024-08-09 09:48:41 发布
最新推荐文章于 2024-08-09 09:48:41 发布
阅读量1.8k 收藏 3
点赞数
文章标签： javascript typescript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15006083/article/details/108596716
版权

uniapp配置eslint、typescript-eslint

安装eslint
yarn add eslint eslint-plugin-vue vue-eslint-parser -D
eslint-plugin-vue使用文档
安装typscript相关插件
必须保证tyscript和typescript-eslint/parser已经安装才能进行下一步@typescript-eslint/eslint-plugin的安装
yarn add typescript @typescript-eslint/parser -D
下一步安装
yarn add @typescript-eslint/eslint-plugin -D
@typescript-eslint/eslint-plugin使用文档

.eslintrc.js文件配置

module.exports = {
    root: true,
    env: {
        node: true
    },
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:vue/essential',
        'plugin:vue/recommended',
        'plugin:@typescript-eslint/recommended',
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 2020,
    },
    //rules中的值0、1、2分别表示不开启检查、警告、错误
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'indent': [2, 4],
        'vue/html-indent': [2, 4],
        'quotes': [2, 'single'] , // 单引号
        '@typescript-eslint/no-var-requires': 0,
        '@typescript-eslint/no-explicit-any': 0,
    }
}

package.json
增加命令行
"lint": "eslint --ext .js,.ts,.vue ./ --fix"

{
“name”: “smart-device-wxapp”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “npm run dev:h5”,
“build”: “npm run build:h5”,
“build:app-plus”: “cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build”,
“build:custom”: “cross-env NODE_ENV=production uniapp-cli custom”,
“build:h5”: “cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build”,
“build:mp-360”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build”,
“build:mp-alipay”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build”,
“build:mp-baidu”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build”,
“build:mp-kuaishou”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build”,
“build:mp-qq”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build”,
“build:mp-toutiao”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build”,
“build:mp-weixin”: “cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build”,
“build:quickapp-native”: “cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build”,
“build:quickapp-webview”: “cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build”,
“build:quickapp-webview-huawei”: “cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build”,
“build:quickapp-webview-union”: “cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build”,
“dev:app-plus”: “cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch”,
“dev:custom”: “cross-env NODE_ENV=development uniapp-cli custom”,
“dev:h5”: “cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve”,
“dev:mp-360”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch”,
“dev:mp-alipay”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch”,
“dev:mp-baidu”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch”,
“dev:mp-kuaishou”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch”,
“dev:mp-qq”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch”,
“dev:mp-toutiao”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch”,
“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch”,
“dev:quickapp-native”: “cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch”,
“dev:quickapp-webview”: “cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch”,
“dev:quickapp-webview-huawei”: “cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch”,
“dev:quickapp-webview-union”: “cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch”,
“info”: “node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js”,
“serve:quickapp-native”: “node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js”,
“test:android”: “cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i”,
“test:h5”: “cross-env UNI_PLATFORM=h5 jest -i”,
“test:ios”: “cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i”,
“test:mp-baidu”: “cross-env UNI_PLATFORM=mp-baidu jest -i”,
“test:mp-weixin”: “cross-env UNI_PLATFORM=mp-weixin jest -i”,
“lint”: “eslint --ext .js,.ts,.vue ./ --fix”
},
“dependencies”: {
“@dcloudio/uni-app-plus”: “^2.0.0-28920200907001”,
“@dcloudio/uni-h5”: “^2.0.0-28920200907001”,
“@dcloudio/uni-helper-json”: “",
“@dcloudio/uni-mp-360”: “^2.0.0-28920200907001”,
“@dcloudio/uni-mp-alipay”: “^2.0.0-28920200907001”,
“@dcloudio/uni-mp-baidu”: “^2.0.0-28920200907001”,
“@dcloudio/uni-mp-qq”: “^2.0.0-28920200907001”,
“@dcloudio/uni-mp-toutiao”: “^2.0.0-28920200907001”,
“@dcloudio/uni-mp-vue”: “^2.0.0-28920200907001”,
“@dcloudio/uni-mp-weixin”: “^2.0.0-28920200907001”,
“@dcloudio/uni-quickapp-native”: “^2.0.0-28920200907001”,
“@dcloudio/uni-quickapp-webview”: “^2.0.0-28920200907001”,
“@dcloudio/uni-stat”: “^2.0.0-28920200907001”,
“@vue/shared”: “^3.0.0-rc.4”,
“core-js”: “^3.6.5”,
“flyio”: “^0.6.2”,
“regenerator-runtime”: “^0.12.1”,
“uview-ui”: “^1.6.9”,
“vue”: “^2.6.11”,
“vue-class-component”: “^7.2.5”,
“vue-property-decorator”: “^9.0.0”,
“vuex”: “^3.2.0”
},
“devDependencies”: {
“@babel/plugin-syntax-typescript”: “^7.2.0”,
“@dcloudio/types”: "”,
“@dcloudio/uni-automator”: “^2.0.0-28920200907001”,
“@dcloudio/uni-cli-shared”: “^2.0.0-28920200907001”,
“@dcloudio/uni-migration”: “^2.0.0-28920200907001”,
“@dcloudio/uni-template-compiler”: “^2.0.0-28920200907001”,
“@dcloudio/vue-cli-plugin-hbuilderx”: “^2.0.0-28920200907001”,
“@dcloudio/vue-cli-plugin-uni”: “^2.0.0-28920200907001”,
“@dcloudio/vue-cli-plugin-uni-optimize”: “^2.0.0-28920200907001”,
“@dcloudio/webpack-uni-mp-loader”: “^2.0.0-28920200907001”,
“@dcloudio/webpack-uni-pages-loader”: “^2.0.0-28920200907001”,
“@typescript-eslint/eslint-plugin”: “^4.1.1”,
“@typescript-eslint/parser”: “^4.1.1”,
“@vue/cli-plugin-babel”: “~4.5.0”,
“@vue/cli-plugin-typescript”: “",
“@vue/cli-service”: “~4.5.0”,
“babel-plugin-import”: “^1.11.0”,
“cross-env”: “^7.0.2”,
“eslint”: “^7.9.0”,
“eslint-plugin-vue”: “^6.2.2”,
“jest”: “^25.4.0”,
“mini-types”: "”,
“miniprogram-api-typings”: “*”,
“postcss-comment”: “^2.0.0”,
“typescript”: “^3.0.0”,
“vue-eslint-parser”: “^7.1.0”,
“vue-template-compiler”: “^2.6.11”
},
“browserslist”: [
“Android >= 4”,
“ios >= 8”
],
“uni-app”: {
“scripts”: {}
}
}
qq_15006083
关注
二、为uniapp项目配置基于airbnb风格的Eslint代码检查规则
weixin_39915504的博客
07-22 2670
Eslint 可以约束团队的代码风格统一，有过协同开发的小伙伴们应该深有体会，团队中开发者代码风格迥异，有时甚至可以称作 “五彩缤纷”，我用小驼峰，你用下划线，他用大驼峰，更有甚者，拼音、拼音简写、拼音加英语单词，简直不堪入目、不知所云；...
Vue3 + TypeScript + Vite 初始项目搭建（ESLint、Prettier、Sass
tencentes的博客
04-17 861
为了使在使用 ESLint 进行代码检查时，遇到使用别名 import 模块时，不报错，使 ESLint 能够支持别名配置，所以在 ESLint 配置文件中 import/resolver 的 alias 选项，配置如何解析 import 语句中的别名，依赖 eslint-import-resolver-alias 和 eslint-plugin-import 插件。
eslint-plugin-typescript：ESLint的TypeScript插件
02-05
此存储库已存档。 请参阅 eslint-plugin-typescript 对ESLint的TypeScript支持。 （这仍处于初期阶段，因此请耐心等待。） 以下自述文件适用于即将发布的1.0.0版本。 安装 您首先需要安装 ： $ npm i eslint --save-dev 接下来，如果尚未安装typescript ，请安装： $ npm i typescript@~3.1.1 --save-dev 最后，安装eslint-plugin-typescript ： $ npm install eslint-plugin-typescript --save-dev 注意：如
@typescript-eslint/eslint-plugin@5.30.6
weixin_42349568的博客
07-18 2135
然后再安装依赖，这个命令是让yarn忽略node的版本检查，或者另一个解决办法是安装合适版本的node。
Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
最新发布
on1yLX的博客
08-09 1148
typescript-eslint/eslint-plugin：插件，包含一系列TypeScript的ESint规则。eslint-plugin-vue：仅支持vue，提供的规则可以支持 .vue\js\jsx\ts\tsx 文件校验。执行命令，yarn lint-fix，项目按照eslint-prettier规则进行代码格式化。eslint-config-prettier：解决eslint和prettier冲突。eslint-config-prettier：将prettier作为eslint规则。
配置 uni-app eslint
weixin_46264539的博客
09-03 2245
编辑器：vs code 脚手架：uni-app eslint标准：Standard 下载安装uni-app项目 vs code安装插件ESLint 下载安装eslint-config-standard github地址：eslint语法检查standard 在当前项目中执行npx eslint --init（npx是npm包中带有的一个命令），如上图选择安装成功完毕后，项目工程目录下会自动生成.eslintrc.js文件。此时你的语法检查已经生效（未生效请重启vs code）。 其他配置 uni-app
uniapp 开启eslint 代码检查
小游
12-19 2141
本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问 先安装 eslintnpm install eslint --save，然后我们初始化项目eslint --init 然后我们启动eslint
uniapp+vite+vue3+ts配置eslint代码检查及prettier规范检查
u011296285的博客
03-10 4243
ESLint 是一个用于检测JavaScript代码中的错误和潜在问题的工具。它只关注你写的代码是否正确，不会管你代码的格式；Prettier 则是一个代码格式化工具，它旨在确保代码在缩进、空格、换行、引号和分号等格式化方面遵循一致的规则，在团队开发中，让所有人的代码规范都保存一致的风格，还是比较重要的。
eslint常见插件用途及webpack打包配置
xiangshj的博客
03-11 3413
最近在研究怎样在webpack打包中加入代码格式审查，看到一大堆各种莫名其妙的eslint相关扩展插件，头大，不明所以，随花了两天时间研究了一下相应的操作； 一般我们使用eslint是想格式化我们的代码，使它更规范，大家能约定熟成，便于统一项目代码风格，减少不必要的格式错误； 一般理想的状态是，大家提交代码之前一会自动格式化，并检查格式错误，给予提示； git钩子husky hsuky的作用是在我们git提交代码的生命过程中，针对不同的生命周期，做一些额外操作，例如代码格式审查； 1.安装husky npm
vscode下vue3项目配置eslint+prettier
qq_40712430的博客
10-10 1262
vue3项目配置eslint+prettier
基于 Uniapp + Vue3 + Typescript 的移动端跨平台快速开发脚手架
02-27
Typescript 在 JavaScript 的基础上添加静态类型。 Vite3 前端工具链 vk-uview-ui 支持 Vue3 的 uview 组件库 Pinia 状态管理 VueUse 基于 Composition API的实用函数集合、hooks。 UnoCSS 即时按需原子CSS...
【Uni-App】vscode 开发uni-app 配置eslint、prettier 实现代码检查和代码自动格式化
Write less，do more
12-15 7765
> 本来很早之前就想总结一下关于uni-app的一些代码自动格式化方面的配置 > 因为公司项目原因，拆分了新老项目，需要带新人，每个人的开发方式不一样 > 所以为了项目的代码风格统一性，以及为了避免后期的git分支操作冲突 > > 我自己的 HbuiiderX开发uni-app时已经搞好了代码检查和自动格式化，奈何其他同事都不会设置，导致了很多次代码提交，显示有很多改动，导致代码覆盖问题。 > 于是有了这篇文章。 > 本文实现的方式是：利用vscode进行编码，用HBuilderX进行开发
uniapp添加eslint的最简单方法
weixin_41652495的博客
03-08 6741
你可以重头开始安装eslint，然后初始化，最后安装你所需要的插件，比如eslint-plugin-vue,但是uniapp小程序项目的构建也使用了@vue/cli工具，所以我们可以直接拿来用。 安装： 1$vueadd@vue/eslint 2 3//同样的可以选择@vue/cli-plugin-eslint提供的四个模式 4 5?PickanESLintconfig:Basic 6?Pickadditionallintfeatures:Lintonsave 然......
uni-app配置eslint + commitlint + editorconfig + husky
小帅的编程笔记
08-29 1179
uni-app配置eslint + commitlint + editorconfig + husky uniapp是一个优秀的跨端框架，但官方的创建项目并未提供eslint，这对于我们多人协作开发并不友好。现在网上的很多文章教程安装的都是老版本的husky等，现在已经很难跑通。本文全部使用最新的版本来安装，保证可以是正常使用的。有问题也欢迎交流。 使用vue-cli命令行创建项目 这里啰嗦一句，我并不喜欢使用HBuilder去创建项目和开发，因为它并不能实现自动化的CI/CD，还需要额外的安装一个IDE，
项目中给Typescript单独添加ESlint配置
weixin_42156055的博客
04-29 1560
老项目中已有ESlint，如何在不影响其他文件的情况下添加对ts文件的配置 npm i -D@typescript-eslint/parser npm i -D@typescript-eslint/eslint-plugin // 注意，这俩包版本号要相同 overrides: [ { files: ["*.ts"], // 对 .ts 文件单独单价配置 parser: "@typescript-eslint/parser", // 添加解析器 ...
【uniapp - vue3】搭建项目模板 第二章 代码风格检测与限制(eslint + prettier)
qq_39959538的博客
08-11 1181
为什么要有代码风格管理，平常我们开发不是一个人，而是整个团队，每个人都有自己的编码风格，但这样不利于团队之间的配合， 统一的编码风格可以提高代码的可读性，可以更快的理解别人写的代码。
Vscode中 react Eslint 不生效，并且提示Cannot find module ‘@typescript-eslint/eslint-plugin‘‘终极解决‘方案。
qq_42675769的博客
07-05 5067
https://ask.csdn.net/questions/1963567 如果尝试了网上的各种引入插件和配置VScode Eslint 后工作空间仍然不提示，不自动根据Eslint规则，进行代码修复，请看下边操作。 // 错误场景为，总是提示找不到@typescript-eslint/eslint-plugin，不管是删除node_modules文件夹重新install、还是和同事对各个环节的配置，从nodejs安装到--Vscode插件按照--Vscode Eslint配置--npm instal.
react typescript项目配置eslint+prettier
好巧的博客
07-20 4199
eslint-plugin-prettier 插件会调用prettier对你的代码风格进行检查，其原理是先使用 prettier 对你的代码进行格式化，然后与格式化之前的代码进行对比，如果出现了不一致，这个地方就会被 prettier 进行标记。当运行 ESLint 的时候检查一个文件的时候，它会首先尝试读取该文件的目录下的配置文件，然后再一级一级往上查找，将所找到的配置合并起来，作为当前被检查文件的配置。由于是 react 项目，所以还需要插件 eslint-plugin-react 来支持 .tsx。
推荐使用：eslint-plugin-typescript - 强力的TypeScript ESLint插件
gitblog_00054的博客
05-08 500
推荐使用：eslint-plugin-typescript - 强力的TypeScript ESLint插件 eslint-plugin-typescriptTypeScript plugin for ESLint项目地址:https://gitcode.com/gh_mirrors/es/eslint-plugin-typescript 在追求代码质量和规范化的道路上，你是否已经对TypeSc...
import { PDFViewerApplication } from 'pdfjs-dist/web/pdf_viewer'// eslint-disable-next-line @typescript-eslint/no-unsafe-call PDFViewerApplication.initialize() // eslint-disable-next-line @typescript-eslint/no-unsafe-call PDFViewerApplication.cleanup()
07-13
这个方法会设置必要的配置和初始化PDF查看器的各个组件。 `PDFViewerApplication.cleanup()`方法用于清理PDF查看器应用程序。这个方法会清理所有的事件监听器和资源，以确保应用程序的正常关闭。 请注意，这段代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值