前端代码规范

CSS

命名要语义化
用类选择器,减少使用标签选择器:因为项目中重复的标签多了以后不好区分。可能有很多重复的标签,所以最好还是使用类选择器。
bem规范:

.block{}

.block__element{}

.block–modifier{}

CSS样式推荐书写顺序:
好的样式顺序,不仅看起来清晰,也可以提升浏览器渲染DOM的性能。
定位属性:position display float left top right bottom overflow clear z-index
自身属性:width height margin padding border background
文字样式:font-family font-size font-style font-weight font-varient color
文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
css3中新增属性:content box-shadow border-radius transform……

TS

只有当前文件要用的类型可以放在当前文件,多个文件公用的可以在父文件里建一个types.ts来存放。原因:避免类型重复定义,代码量冗长。
类型文件没有默认导出,每个类型需要一个一个export。

脚手架

单独业务代码结构命名:以todo list为例,在src/pages下面新建一个文件夹,命名为todolist,再去写相关的业务代码。而不是放在src/pages/home下面。
组件命名也要语义化。
目录结构:
目录规范:App里要写页面整个框架的结构

VScode自动格式化

在vs code设置里,setting.json里添加这行代码:

"editor.codeActionsOnSave": {
		"source.fixAll": true,
		"source.fixAll.eslint": true,
		"source.fixAll.stylelint": true
	},

就可以在每次保存以后自动格式化代码

你可能感兴趣的:(工作中的笔记产出,前端,代码规范,vscode)