当前位置: 首页 > news >正文

vue3安装eslint和prettier,最简单的步骤

 第1步:

安装eslint

yarn add eslint -D

 第2步:

在根文件夹中,创建.eslintrc.js文件

 第3步:

在package.json文件中新增命令

 "lint": "eslint --fix --ext .ts,.tsx,.vue src --quiet","prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\""

第4步:

安装eslint-plugin-vue

yarn add eslint-plugin-vue -D

第5步:

安装prettier

yarn add add prettier -D

 第6步:

在根文件夹创建 .prettierrc.js文件

第7步:

安装eslint-config-prettier

yarn add eslint-config-prettier -D

第8步:

安装eslint-plugin-prettier

yarn add eslint-plugin-prettier -D

第9步:

在.eslintrc.js文件中粘贴下面代码

module.exports = {env: {browser: true,es2021: true,node: true},extends: ["eslint:recommended","plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended","plugin:prettier/recommended" //放最后面 eslint-config-prettier插件用来禁止eslint中所有格式规则],parser: "vue-eslint-parser",parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: "latest",sourceType: "module"},plugins: ["vue", "@typescript-eslint"],rules: {}
};

第10步:

在.prettierrc.js文件中粘贴下面代码

module.exports = {singleQuote: false, // 使用双引号semi: true, // 末尾添加分号 var a=1tabWidth: 2, //tab代码2个空格trailingComma: "none", // {a:1,}是否使用尾逗号,有三个可选值"<none|es5|all>useTabs: false,endOfLine: "auto",bracketSpacing: true //对象括号里是否有空格,默认为true,效果:{ foo: bar }
};

第11步:

在vscode插件中,安装eslint插件,安装prettier插件

第12步:

 点击vscode的设置

第13步:

点击控制面板

第14步:

输入Preferences:Open Workspace Settings(JSON),为项目新建 .vscode/settings.json 文件

第15步:

粘贴下面的代码


{//下面是eslint的设置"editor.codeActionsOnSave": {"source.fixAll": false,"source.fixAll.eslint": true},//下面是prettier的设置"editor.formatOnPaste": true,"editor.defaultFormatter": "esbenp.prettier-vscode"//将prettier设置为默认格式化工具
}

 第16步:

关闭vscode , 重新启动vscode,这样就全设置好了,html标签,script里的代码,style里的代码都会在保存时格式化

http://www.lryc.cn/news/246278.html

相关文章:

  • Day32| Leetcode 122. 买卖股票的最佳时机 II Leetcode 55. 跳跃游戏 Leetcode 45. 跳跃游戏 II
  • 95.STL-遍历算法 for_each
  • Python基础语法之学习type()函数
  • filebeat报错dropping too large message of size
  • 【C++】类型转换 ④ ( 子类 和 父类 之间的类型转换 - 动态类型转换 dynamic_cast )
  • 在CentOS 7.9上搭建高性能的FastDFS+Nginx文件服务器集群并实现外部远程访问
  • YOLOv8独家原创改进: AKConv(可改变核卷积),即插即用的卷积,效果秒杀DSConv | 2023年11月最新发表
  • Docker pause/unpause命令
  • PostgreSQL create or replace view和重建视图 有什么区别?
  • Selenium 连接到现有的 Firefox 示例
  • 小程序如何进行版本回退
  • 15:00面试,15:06就出来了,问的问题有点变态。。。
  • 大数据-之LibrA数据库系统告警处理(ALM-37008 MPPDB服务不可用)
  • Pytorch-gpu环境篇
  • 互联网上门洗鞋店小程序
  • 【深度学习笔记】04 概率论基础
  • 45.113.200.1搜索引擎蜘蛛抓取不到网站内容页面可能的原因
  • VMware 系列:vSphere Client安装配置常见问题及解决方案
  • FLASK博客系列5——模板之从天而降
  • 6.一维数组——用冒泡法将10个整数由大到小排序
  • Wireshark的捕获过滤器
  • 安陆FPGA调试中遇到的问题总结
  • Springboot2+WebSocket
  • 希尔伯特和包络变换
  • 国产Ai大模型和chtgpt3.5的比较
  • 机器学习ROC曲线中的阈值thresholds
  • MySOL常见四种连接查询
  • 数智融合 开启金融数据治理新时代
  • 数据结构——利用堆进行对数组的排序
  • Unity 场景切换