AI 助理
备案控制台
开发者社区 云计算 文章 正文

vscode保存代码时自动eslint格式化

2022-11-14 642
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vscode保存代码时自动eslint格式化

背景

我们期望使用vscode编码时，可以依据eslint规则，自动格式化我们的代码。那么可以通过设置vscode的自动格式化，来实现这一需求。

实现方式

  1. 安装vscode插件Eslint

image.png

修改vscode设置

文件-首选项-设置，或通过ctrl + shift + p => 首选项：打开工作区设置，打开vscode设置界面

image.png

打开settings.json，添加下面的配置

image.png

{
"search.followSymlinks": false,
"editor.tabSize": 2,
//配置eslint"eslint.validate": [
"javascript",  // 用eslint的规则检测js文件"javascriptreact",
"vue",
"html",
  ],
// 启用保存时自动修复eslint,默认只支持.js文件"editor.codeActionsOnSave": {
"source.fixAll.eslint": true  }
}

image.png

之后写代码的时候，保存代码，vscode即可自动依据eslint规则对代码格式化

关键词：
vscode代码
vscode格式化
vscode eslint格式化
vscode eslint
vs code格式化
Boale_H
目录
相关文章
Kane
|
29天前
|
人工智能 C++ iOS开发
ollama + qwen2.5-coder + VS Code + Continue 实现本地AI 辅助写代码
本文介绍在Apple M4 MacOS环境下搭建Ollama和qwen2.5-coder模型的过程。首先通过官网或Brew安装Ollama，然后下载qwen2.5-coder模型，可通过终端命令`ollama run qwen2.5-coder`启动模型进行测试。最后，在VS Code中安装Continue插件，并配置qwen2.5-coder模型用于代码开发辅助。
Kane
2053 5
众所周知
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具，可以确保代码风格一致，提升团队协作效率和代码质量。
众所周知
270 2
龙大吉
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具，可以显著提升编码效率和代码质量。
龙大吉
449 4
龙大吉
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具，可以确保代码风格一致，提高代码质量和可读性。
龙大吉
135 1
龙大吉
|
2月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展，代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier，以及设置 VSCode，实现代码实时检查和格式化，确保代码风格一致。
龙大吉
239 2
java冯坚持
|
2月前
|
IDE 网络安全 开发工具
IDE之vscode：连接远程服务器代码（亲测OK），与pycharm链接服务器做对比（亲自使用过了），打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发，并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单，推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外，还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
java冯坚持
863 0
IDE之vscode：连接远程服务器代码（亲测OK），与pycharm链接服务器做对比（亲自使用过了），打开文件夹后切换文件夹。
龙大吉
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码，提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier，实现代码规范检查和自动格式化，确保代码风格一致，提高可读性和维护性。
龙大吉
105 2
游客5wgpwz4lyt4j6
|
29天前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件，自然语言控制VS Code，轻松开发应用，核心技术开源！
SmartVscode插件深度解析：自然语言控制VS Code的革命性工具及其开源框架App-Controller
游客5wgpwz4lyt4j6
142 1
BetterBench
|
4月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题，并提供了一些相关的使用技巧和资源链接。
BetterBench
256 1
爱的不是纯牛奶-47754
|
1月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件：ESLint用于代码质量和风格检查；Prettier自动格式化代码；GitLens增强Git功能；Live Server提供前端实时预览；Docker支持容器管理。
爱的不是纯牛奶-47754
161 2

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    Mac 上 iterm2 和 VSCode 终端中的字体设置建议
  • 3
    使用VScode开发Angular
  • 4
    Ubuntu 20.04 右键扩展在vscode中打开
  • 5
    阿里云服务器远程配置使用Xshell,Filezilla,Vscode
  • 6
    VS Code中进行git远程仓库同步
  • 7
    Mac 系统 VS Code 设置向下复制粘贴当前行快捷键(Ctrl + D)
  • 8
    VS Code 创建maven项目
  • 9
    【dotnet跨平台】关于VS Code扩展和主题市场
  • 10
    VS Code识别编辑规范，ESlint规则，VS Code保存去掉自动加分号、逗号、双引号
  • 1
    【GitHub】github学生认证，在vscode中使用copilot的教程
    944
  • 2
    【vscode】在本地加载远端环境并开发
    338
  • 3
    vscode跟踪vue代码方法
    190
  • 4
    如何使用vscode启动Flask并实现无公网IP远程访问内网服务
    219
  • 5
    vscode 使用python无法导入库
    201
  • 6
    PHP基于B/S版 医院不良事件管理系统源码vscode+laravel8医院如何加强不良事件上报系统的管理 AEMS系统源码
    70
  • 7
    一个开源轻量级的C#代码格式化工具（支持VS和VS Code）
    226
  • 8
    【专栏：工具与技巧篇】使用代码编辑器（VS Code/Sublime Text）提升开发效率
    318
  • 9
    在 VS Code 中使用 OSS 进行 Markdown 文档编写
    312
  • 10
    VSCode快捷键使用教程：提高编码效率的利器
    1103

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础2：VS Code和Edge的联动开发
  • 基于函数计算部署Serverless VSCode WebIDE
    • 下一篇
    阿里云oss存储简介和如何使用