前端代码规范

最新推荐文章于 2024-08-30 09:52:14 发布
最新推荐文章于 2024-08-30 09:52:14 发布
阅读量498 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 前端 代码规范 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2398936046/article/details/124764523
版权
本文主要介绍了前端开发的代码规范，包括HTML、CSS、less、JavaScript和Vue的规范。强调了使用ESLint和Prettier进行代码约束和格式化，HTML的语义化标签，CSS避免使用标签选择器，less的嵌套限制，JavaScript的命名规则，以及Vue组件的详细Prop定义和模板简洁性等。此外，还提出了v-if与v-show的使用场景和v-for的key策略。
摘要由CSDN通过智能技术生成

新公司规范,做个备注

通用规范

1、统一使用ESLint

  • 使用Eslint约束代码规范，有实在不太合理的规矩统一自定义屏蔽

2、代码格式化

  • 推荐采用Prettier配置如下

    vscode配置 展开源码

HTML规范

1、HTML 类型

推荐使用 HTML5 的文档类型申明：
（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。

  • 规定字符编码
  • IE 兼容模式
  • doctype 大写

2、缩进

  • 缩进使用 2 个空格（一个 tab）
  • 嵌套的节点应该缩进。

3、分块注释

  • 在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式

4、语义化标签

  • HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签

5、引号

  • 使用双引号(“ “) 而不是单引号(‘ ‘) 。

CSS规范

1、命名

  • 类名使用小写字母，以中划线分隔
  • id 采用驼峰式命名

2、选择器

  • css 选择器中避免使用标签名
    从结构
最低0.47元/天 解锁文章
单推人
关注
专栏目录
【前端工程化】六：前端规范化标准及工具ESLint等基本使用
Whoopsina的博客
03-02 606
ESlint的基本使用 最为主流的js lint工具 监测js代码质量 ESLint很容易统一开发者的编程风格 ESLint可以帮助开发者提升编码能力 ESLint安装 初始化项目 安装ESLint模块为开发依赖npm install eslint -D 通过CLI命令验证安装结果npx eslint -v ESLint快速上手 编写“问题”代码 使用eslint执行检测，最新版本的eslint可以不需要配置配置文件npx eslint .\test.js --fix自动修复问题代码 完成esli
这是借鉴、引用的是京东前端代码规范。
05-05
这是借鉴、引用的是京东前端代码规范。
使用 Eslint & standard 规范前端代码
weixin_30314631的博客
09-25 566
前言 JavaScript的动态语言类型，给它带来了独特的魅力，产生了风格多样的开发范式，同时也带来了一些问题，从运行时常见的 undefined 、null 报错，到代码随意的加减分号、换行、空格，引起的视觉混乱，如果是团队开发，则这种情况会更加的严重，必须加以约束，下文介绍基于 vue 的代码严格模式及编程规范。 核心插件：Eslint+standard Eslin...
eslint 配置_前端代码规范配置 （一）
weixin_39942637的博客
11-25 992
ESLintESLint 是一个开源的 Javascript 代码检测工具，通过将 js 代码解析成抽象语法树（AST），分析并给与代码质量（如一些方法的使用方式不对）和代码风格(缩进，引号等等）两方面的提示。这样就可以在编码过程中发现问题，而不是在代码的执行过程中。ESLint 与 vscode-ESLint 插件的区别ESLint 是一个 npm 包，安装之后，我们可以通过相应的命令来分细或是...
ESLint 插件 Tailwind CSS 使用教程
最新发布
gitblog_00704的博客
08-30 368
ESLint 插件 Tailwind CSS 使用教程 eslint-plugin-tailwindESLint rules for Tailwind CSS项目地址:https://gitcode.com/gh_mirrors/es/eslint-plugin-tailwind 项目介绍 ESLint 插件 Tailwind CSS 是一个用于增强 Tailwind CSS 使用体验的 ESL...
eslint规范_前端规范那些事！！
weixin_39944074的博客
11-22 368
随着前端工程化的日益成熟，代码规范化对于开发效率的提升起着很大的作用，包括后期的维护，统一的规范能节省交接的时间成本，而规范包括目录结构、代码质量(命名、注释、JS规范、CSS规范、缩进等)1.eslint一个插件化的 javascript 代码检测工具，它可以用于检查常见的 JavaScript 代码错误，也可以进行代码风格检查使用到两个扩展包(airbnb规范 & eslin...
编程规范 三种命名方法PascalCase,camelCase,hungarian_notation， kebab-case 形式
qq_50630857的博客
12-16 846
编程规范 命名方法
前端代码规范.pdf
05-25
前端代码规范
前端代码规范文档，js，css，html等
10-20
前端代码规范文档@js、css、html 等 本文档旨在规范前端开发过程中的代码编写，涵盖 JavaScript、CSS、HTML 等多方面的规范，旨在提高代码的可读性、可维护性和可扩展性。 命名规范 1.1.1 项目命名：全部采用小写...
前端代码规范.docx
08-13
前端代码规范 本文档介绍了 Java 前端开发代码书写规范，旨在帮助开发者编写整洁、规范的代码。以下是该规范的详细说明： HTML 开发约束 1. 标签套用：优先复用案列中提供的 HTML 模版（包括其中的 class），以...
前端代码规范.rar
11-25
"前端代码规范"这个压缩包文件很可能包含了一系列关于如何编写整洁、一致且易于理解的前端代码的指南。以下是对这些规范的一些核心内容的详细解读： 1. **命名规则**：前端代码规范通常会涵盖变量、函数、类以及...
漂亮的ESLintHTML格式化程序从ESLint的官方HTML格式化程序扩展而来
08-11
漂亮的ESLintHTML格式化程序从ESLint的官方HTML格式化程序扩展而来
eslint-plugin-filenames:用于检查文件名的 Eslint 插件
05-29
eslint 插件文件名 该项目不再积极维护 添加规则以确保您的 javascript 文件的文件名一致。 请注意：此插件只会对您使用 eslint 进行 lint 的.js 、 .jsx文件的文件名进行 lint。 它会忽略其他没有用 eslint lint 的文件。 启用插件 此插件需要将eslint>=1.0.0版本安装为对等依赖项。 修改您的.eslintrc文件以加载插件并启用您要使用的规则。 { " plugins " : [ " filenames " ], " rules " : { " filenames/match-regex " : 2 , " filenames/match-exported " : 2 , " filenames/no-index " : 2 } } 规则 通过正则表达式（匹配正则表达式）一致
**精华解析：eslint-plugin-css-modules**
gitblog_00040的博客
06-12 269
精华解析：eslint-plugin-css-modules 项目地址:https://gitcode.com/atfzl/eslint-plugin-css-modules 在现代化的前端开发环境中，样式管理常常成为困扰开发者的一大难题，特别是当项目规模逐渐膨胀时，如何确保每一行CSS都被有效利用，以及避免错误引用非存在的类名，成为了亟需解决的问题。今天，我将向大家隆重推荐一款强大的工具——es...
如何关闭eslint中的tab和空格混用的报错
m0_60687710的博客
09-01 1056
页面出现以下报错 需要在i项目中的.eslintrc.js文件中新增一个规则就可以解决（规则写在rules对象里） "space-before-function-paren": 0
ESLint 基本语法（超详细版本）
m0_67841039的博客
05-31 2609
一、eslint - eslint 的作用和常见的语法规则 1.1、目标：能够知道 ESLint 常见的语法规则，并在实际开发中遵守这些规则 1.2、什么是 ESLint？ 官方概念：ESLint 是可组装的 JavaScript 和 JSX 检查工具。 通俗理解：一个代码格式的检查工具，用来约束团队成员的代码风格。 1.3、好处： 保证团队协作开发时，编写出来的代码风格保持一致。例如： ① 函数名和括号之间要有一个空格 ② JS 中的字符串，统一使用单引号表示
HTMLHint、CSSLint、ESLint
dubinglin的博客
06-20 3897
HTMLHint、CSSLint、ESLint ESLint    灵活，任何规则都可以开启闭合，以及有些规则有些额外配置    很容易拓展和有需要可用插件    容易理解产出    包含了在其他检查器中不可用的规则，使得ESLint在错误检查上更有用    支持ES6，唯一支持JSX的工具    支持自定义报告  一、安装 VisualStudio Code 二、安装插件，点击扩展安装ESLin...
eslint最详细规范整理
wfly blog
08-14 9180
/** * @Description: eslint配置详解 * @author wfd * @date 2020/8/8 14:25 * @detail *1、运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建 *2、{ * "rules": { * "semi": ["error", "always"], * "quotes": ["error", "double"] * } * .
遵循京东前端代码规范，提升开发效率与质量
"本文档是关于前端代码规范的介绍，主要参考了京东的前端代码规范，旨在提升团队协作效率，保证代码质量，并为开发奠定基础。文档内容涵盖HTML规范、图片规范、CSS规范和命名规范，JavaScript规范则暂时未详述。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值