vscode技巧-eslint配置

news2024/11/23 15:31:25

开发环境

js+vue3+axios

下载插件

Eslint、Prettfier

配置过程

1.配置eslint

进入settings,输入eslint,在settings.json中替换一下文件

// #每次保存的时候自动格式化
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    "javascript.referencesCodeLens.enabled": true,
    "git.enabled": true,
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[less]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "tslint.jsEnable": true,
    // "workbench.colorTheme": "Monokai Dimmed",
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDragAndDrop": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[json]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "npm.enableScriptExplorer": true,
    "editor.tabCompletion": "on",
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    "prettier.printWidth": 120,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "tabWidth": 4,
            "wrap_attributes": "auto",
            "wrap-line-length": 120
        },
        "prettier": {
            "semi": true,
            "singleQuote": true
        },
        "prettyhtml": {
            "printWidth": 120,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "vetur.format.options.useTabs": false,
    "vetur.format.options.tabSize": 4,
    "vetur.format.scriptInitialIndent": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // 按照什么规范去格式化js, prettier/prettier-eslint 会在句末自动添加分号,但遇到then,catch等链式调用时会自动换行
    // "vetur.format.defaultFormatter.js": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript", // none/prettier/prettier-eslint/vscode-typescript
    "vetur.format.defaultFormatter.less": "prettier",
    "css.lint.duplicateProperties": "warning",
    "emmet.triggerExpansionOnTab": false,
    "vetur.format.styleInitialIndent": true,
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.sass": "sass-formatter",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.ts": "prettier",
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.vue": "vue",
        "*.nvue": "vue"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "vetur.validation.template": false,
    "task.slowProviderWarning": ["typescript"],
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[scss]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "editor.rulers": [],
    "terminal.integrated.automationProfile.windows": null,
    "editor.renderWhitespace": "all",
    "editor.autoIndent": "advanced",
    "explorer.confirmDelete": false,
    "editor.semanticTokenColorCustomizations": {},
    "http.proxyAuthorization": null,
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced"
    },
    "tabnine.experimentalAutoImports": true,
    "editor.formatOnSave": true,
    "eslint.codeActionsOnSave.rules": null,
    "git.confirmSync": false,
    "path-intellisense.mappings": {
        "@":"${workspaceRoot}/src"
    },
    "editor.wordWrap": "on",
    "html.format.wrapAttributes": "force-expand-multiline"
}

2.设置默认格式化configuration

右击Format Document With,配置Configure Default Formatter,选择Prettier

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2137274.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

海康威视摄像机和录像机的监控与回放

文章目录 海康威视摄像机和录像机的监控与回放1、海康威视监控设备简介1.1、摄像机二次开发1.1.1:协议选择1.1.2:ffmpeg软件转流 2、各种流媒体协议介绍2.1:流媒体协议介绍2.1.1:RTSP (实时流传输协议)2.1.2:RTMP (实时…

Java语言程序设计基础篇_编程练习题**18.26 (创建一个迷宫)

目录 题目:**18.26 (创建一个迷宫) 习题思路 代码示例 输出结果 题目:**18.26 (创建一个迷宫) 编写一个程序,在迷宫中寻找一条路径,如图18-13a所示。该迷宫由一个8 x 8 的棋盘表示。路径必须满足下列条件: 路径在迷…

日志收集工具 Fluentd vs Fluent Bit 的区别

参考链接: FluentdFluentd BitFluentd & Fluent Bit | Fluent Bit: Official Manual Fluentd 与 Fluent Bit 两者都是生产级遥测生态系统! 遥测数据处理可能很复杂,尤其是在大规模处理时。这就是创建 Fluentd 的原因。 Fluentd 不仅仅是…

国产化中间件正在侵蚀开源中间件

开源中间件的发展趋势表明,它们将继续在技术创新和生态建设中发挥重要作用,尤其是在云计算、大数据等新兴技术领域。开源中间件如Apache Kafka、RabbitMQ、ActiveMQ和RocketMQ等在市场上有着广泛的应用。它们在技术社区中得到了良好的支持,并…

k8s中控制器的使用

目录 一、什么是控制器 二、控制器常用类型 三、replicaset控制器 1、replicaset功能 2、replicaset参数说明 3、replicaset示例 四、deployment控制器 1、deployment控制器的功能 2、deployment控制器示例 (1)版本迭代 (2&#x…

MySql的基础讲解

一、初识MySql 数据库:按照数据结构来组织、存储和管理数据的仓库;是一个长期存储在计算机内的、有组织的、可共享 的、统一管理的大量数据的集合; OLTP:联机事务处理,主要是对数据库的增删改查。 OLTP 主要用来记录…

【研赛论文】数学建模2024华为杯论文word/latex模板

国赛结束,研究生瞩目的研赛马上就要来了,相信研究生同学也是在努力的准备当中,在这里祝愿大家能够获得一个好的名次。一举冲出重围,拿下国奖。在数模比赛当中,论文是参赛者唯一能够与评阅老师进行沟通的方式&#xff0…

【Python爬虫系列】_021.异步请求aiohttp

课 程 推 荐我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)文章合集 👈👈

本地部署大模型并使用知识库Windows下Ollama+Docker+MaxKB安装的记录

概要 本文介绍本地部署大模型和知识库的小白方法,可以运行较多种类的大模型,使用的软件为docker和ollama以及MaxKb作为知识库前端。 下载 各安装包可以百度去官网或者github下载或使用,也可以点击下面的的链接和我下载相同的版本。 ollama…

uniapp child.onFieldChange is not a function

uni-forms // 所有子组件参与校验,使用 for 可以使用 awiatfor (let i in childrens) {const child childrens[i];let name realName(child.name);if (typeof child.onFieldChange function) {const result await child.onFieldChange(tempFormData[name]);if (result) {…

如何准备教师资格证科目三“学科知识与教学能力”的考试与面试?(理科导向:数学/物理)

如何准备教师资格证科目三“学科知识与教学能力”的考试与面试?(理科导向:数学/物理) ​ 目录 收起 1 前言 1.1 自身经历 1.2 教师资格证的作用 2 知识点题型分数的分布与学习建议 2.1 科目三的知识点分数分布: …

Python 全栈系列271 微服务踩坑记

说明 这个坑花了10个小时才爬出来 碰到一个现象:将微服务改造为并发后,请求最初很快,然后就出现大量的失败,然后过一会又能用。 过去从来没有碰到这个问题,要么是一些比较明显的资源,或者逻辑bug&#xff0…

Matlab simulink建模与仿真 第十三章(信号通路库)

参考视频:simulink1.1simulink简介_哔哩哔哩_bilibili 一、信号通路库中的模块概览 1、信号通路组 注:部分模块在第二章中有介绍,本章不再赘述。 2、信号存储和访问组 二、总线分配模块 Bus Assignment模块接受总线作为输入,并…

Python之NumPy超详细学习指南:从入门到精通(上篇)

文章目录 Python NumPy学习指南:从入门到精通第一部分:NumPy简介与安装1. 什么是NumPy?2. 安装NumPy使用pip安装:使用Anaconda安装: 第二部分:NumPy数组基础1. NumPy数组的创建从列表创建一维数组&#xff…

Proxyless Service Mesh:下一代微服务架构体系

一、项目背景及意义 在当今的微服务架构中,应用程序通常被拆分成多个独立的服务,这些服务通过网络进行通信。这种架构的优势在于可以提高系统的可扩展性和灵活性,但也带来了新的挑战,比如: 服务间通信的复杂性&#…

Cisco Modeling Labs (CML) 2.7.2 发布下载,新增功能概览

Cisco Modeling Labs (CML) 2.7.2 - 网络仿真工具 思科建模实验室 (CML) 请访问原文链接:https://sysin.org/blog/cisco-modeling-labs-2/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org Cisco Modeling Labs 是我…

Geneformer中文教程(2).huggingface transformers

Geneformer基于hugging face的transformers实现,具体模型是BertForSequenceClassification,本篇先熟悉该模型。 首先直观看Geneformer的模型架构,基于BERT构建一个文本分类模型,我们直接从预训练的Geneformer加载BERT&#xff0c…

Linux相关:在阿里云下载centos系统镜像

文章目录 1、镜像站2、下载方式一2.1、第一步打开镜像站地址2.2 下载地址: https://mirrors.aliyun.com/centos/2.3、选择7版本2.4、镜像文件在isos文件夹中2.5、选择合适的版本 3、下载镜像快捷方式 1、镜像站 阿里云镜像站地址 2、下载方式一 2.1、第一步打开镜像站地址 2…

第二十五章 添加数字签名

文章目录 第二十五章 添加数字签名数字签名概述添加数字签名 第二十五章 添加数字签名 本主题介绍如何向 IRIS Web 服务和 Web 客户端发送的 SOAP 消息添加数字签名。 通常,会同时执行加密和签名。为简单起见,本主题仅介绍签名。有关结合加密和签名的信…

4K投影仪选购全攻略:全玻璃镜头的当贝F6,画面细节纤毫毕现

在当今的投影市场上,4K投影仪已经成了主流产品,越来越多家庭开始关注如何选择一款性价比高、口碑好的4K投影仪。4K投影仪其实指的是具备3840*2160像素分辨率投影仪,它能够提供更清晰、更细腻、更真实的画面效果。 那么4K投影仪该怎么选&…