今天介绍的是一款代码格式化工具,特别适合团队协作开发的时候使用。想必你应该正在使用,它叫 prettier。在 Github 上已达 31.4k star,如果你还不知道它的话就太可惜了。
利用 Vue CLI 创建项目时要将 ESlint 选上,下载完依赖后,用 VSCode 打开项目。
官方自己介绍说,prettier是一款强势武断的代码格式化工具,它几乎移除了编辑器本身所有的对代码的操作格式,然后重新显示。就是为了让所有用这套规则的人有完全相同的代码。在团队协作开发的时候更是体现出它的优势。与eslint,tslint等各种格式化工具不同的是,prettier只关心代码格式化,而不关心语法问题。
VSCode在开发Vue项目的时候,尽管我们安装了格式化插件,但是最终运行时还是会有一堆的警告,就是因为格式化代码的方式和eslint的规范不一样导致的。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125833.html原文链接:https://javaforall.cn
安装Vetur,ESlint, Prettier - Code formatter插件
之前用VScode开发Flutter,设置自动保存格式化。现在开发Vue使用Eslint进行规则验证,为了不必要的麻烦,想要设置自动保存修复不规则问题。
以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力工具是sublime,ws辅助,vscode基本很少使用(就下载安装放在冷宫),但是听说用来写vue项目还不错,就开启了一番折腾。当然工具么,没有谁好谁坏了~~ 不盲目站队,适合自己的就是最好的。
讲代码规范的文章很多,但是很可惜没有一篇文章能讲好讲全,其他文章没完成的工作,就让这篇文章来完成吧。
在Vue.js项目中,使用的是eslint检查。 而在我写完代码后,cnpm run dev运行命令。。。然后悲剧了,一大堆报错!╮(╯▽╰)╭ 安装插件:Vetur:这是vscode上一个vue.js代码提示,语法高亮等功能的流行插件。不过因为它代码格式化使用的是prettier,所以使用vscode右键自带的“格式化文件 Alt+shift+F”,会存在一些问题: 比如强制双引号(double quotes)、行尾自动加上分号(semicolon)等。 重点是:这些在eslint中报错!!!无语O__O
大部分前端项目都配置Stylelint、Eslint、Tslint和Prettier四大前端代码校验工具。「代码校验工具」以下简称Lint,为了解决代码不严谨,通过预设规则校验代码,检测其是否存在错误/漏洞,并对错误/漏洞提示修复方案并尽可能依据修复方案格式化出正确代码。该功能称为「格式化代码」,基本上所有编辑器都需配置该功能。
webstorm设置搜eslintr、eslint、stylelint,如果没有,搜plugin,安装prettier、eslint、stylelint
Visual Studio Code 的插件对于在提升编程效率和加快工作速度非常重要。这里有 30 个最受欢迎的 VSCode 插件,它们将使你成为更高效的搬砖摸鱼大师。这些插件主要适用于前端开发人员,但也有一些通用插件也可以适用于任何开发环境。以下是我将介绍的 VSCode 插件:
// "javascript.suggest.autoImports": true,
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pyycsd/article/details/80969722
【工欲善其事,必先利其器】大家用什么来开发前端项目呢,WebStorm, Atom, 还是Sublime ,这里面哪个不是大名鼎鼎,但是论轻量级,论不要钱的,论生态,Visual Studio Code都是相当强大的,VSCode这款超级编辑器,正在蚕食市场上所有IDE和编辑器的市场。只要插件运用得当,vscode也能达到商业软件效果。
安装三个插件:Prettier - Code formatter、ESLint、Vetur。对应的插件图片如下:
Vetur对于html文件默认使用的是prettyhtml,但是由于prettier也可以支持html的格式化,所以我觉得统一使用prettier对全语言的格式化是比较简洁的。
vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,**新手学习期间,不建议安装形形色色的插件,用到啥就安装啥。**因为有些插件会到vue学习的时候引起冲突,所以这里我就介绍几个常用的插件。
它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。
3.Chinese (Simplified) (简体中文) Language Pack for Visual 中文简体的vscode汉化
本文从代码规范,代码检查,代码格式化,以及编辑器自动化实现的方向,介绍代码规范统一在我们团队的实践应用。
作者:杨成功 原文:https://segmentfault.com/a/1190000040948561
本文虽然使用 Vite 创建了一个 Vue3 + TS 的项目,但其实文中涉及的内容和技术栈并没有关系,主要是结合 ESLint ,Husky,等第三方库实现比较规范的现代化前端工程,可应用于任何技术栈的项目中
很多前端小伙伴在日常使用prettier的时候都或多或少有一点疑惑,prettier在每一个IDE中究竟是怎样工作起来的,为什么配置有时候生效,有时又毫无效果。为了让我们的前端小伙伴更加熟悉这块,本文将对prettier在主流IDE中的使用过程一探究竟。
开发的过程中不同的编辑器,不同的格式化插件对应的代码格式都有差异,这就导致代码风格不一致或是合并冲突。
前端开发规范 代码质量开发规范 代码风格格式化规范 git工作流程提交规范 项目组织规范 项目模板规范 通用脚手架开发 技术文档保留规范 异常处理规范 前后端协作规范 双周分享 技术分享落地留存规范 新人培训规范 新人入职流程规范 前期准备 开发工具vscode vscode所需插件: Vetur、ESLint、Prettir-Code formatter、Prettier ESLint 代码质量规范 Eslint 项目目录配置.eslintrc.js文件用于项目规范、规范可以一起定义或者使用行业标准规范
本文是基于Windows10的. Debugging javascript 打开wwwroot/js/site.js, 写一段简单的js代码: (function ($) { $(docume
第一部分: https://www.cnblogs.com/cgzl/p/8450179.html
安装vscode插件 Vetur、ESLint、Prettier - Code formatter .vscode/settings.json文件
9、Path Intellisense:路径自动感知,在配置文件中配置@后我们就可以很方便快捷的引用各种文件了
大家好,我是HoMeTown,最近在搭建一个公司与某一线大厂有合作,需要做一个性能极其优化的微信小程序,我们组正好刚从企微项目里抽出身来,所以这个艰巨的任务就交给我们来完成了,首先开了一天会,跟合作方的前端经理PM 确定好了技术选型以及规范,分工细则下来以后,得到项目架构&少许业务开发的任务,优化交给合作方去做,因此这个项目会有很多人参与进来,一个强有力的项目约束是十分重要的!
给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
在日常工作中,我们会接触形形色色的工程。如果工程使用的技术架构不同,可能会有对应不同的代码规范。而每个人的编码习惯是不一样的,也是难以短时间内改变的,这也是我们常常在开发一个新工程的时候,会遇到各种规范报错的原因。
这个插件提供html的编写提示,包括到属性的格式监测,语法细致监测纠正,非常好的。插件地址
terminal 是我个人比较喜欢的命令行工具,默认可以启动 cmd, powershell ,Azure Cloud Shell , 还可以自己添加配置,比如 git-bash 。
Mac VSCode 升级中替换了内置格式化插件导致代码格式化自动换行问题: 1、设置 2、搜索 vetur 3、右边三个点按钮,-> open settings.json 4、把下面代码拷贝进去
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱。
最近在和同事合作开发一个项目,忘记一开始约定好项目的规范和格式,导致大家都按照自己的习惯去配置了eslint,prettier,当合并代码后就有了下面的情形:
当前,前端项目支持代码规范校验、代码格式化已经必不可少,同时需要支持代码提交前对代码格式校验预检查,这里提供一份最简单的配置供大家参考。
HTML/CSS/JS/LESS 文件的 prettier 格式化规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor
1.修改语言,如果英语六级的话,便就可以不用修改,按住ctrl+shift+x打开拓展,安装Language Packs插件,然后按住Ctrl + Shift + P打开命令调色板,搜索Configure Display Language命令然后按Enter键,将locale.json创建一个文件,其默认值设置为您的操作系统语言。修改为zh-cn语言即可。
欲善其工必先利其器,本文以vscode编辑器为例子,分享一下笔者常用的vscode工具及技巧,同时也欢迎高手不惜赐教,分享更多的使用技巧,提高工作效率和编程幸福感。本文分为两个部分,常用插件和使用技巧,欢迎点赞(pai zhuan)。
VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
Angular在VSCode下的插件 1.Angular TypeScript Snippets for VS Code 2.Angular VS Code TypeScript and HTML Snippets 3.Auto Import (自动引包) 4.Auto Rename Tag (修改xml或者html方便自动配置标签) 5.Auto Close Tag (自动闭合html标签) 6.vscode-background (vscode的背景) 7.Visual St
EditorConfig for VS Code EditorConfig官网 微软说明 editorconfig-vscode github
1. 代码质量问题:使用 / 编写的方式有可能有问题 (problematic patterns)
按需安装。考虑到有些插件对于一些新手来说暂时用不上,因此我将分为 前端新手→前端程序员→前端工程师 三个阶段来推荐需要安装的插件。
领取专属 10元无门槛券
手把手带您无忧上云