美文网首页
规范代码,提升开发效率,5大绝招解决你的痛点

规范代码,提升开发效率,5大绝招解决你的痛点

作者: 全栈弄潮儿 | 来源:发表于2020-10-14 17:17 被阅读0次
  1. 使用eslint规范检测

一般在团队开发中每个人的代码习惯都不太一样,这样就会导致代码风格不一致,以致于维护和修改bug的时候看别人的代码灰常痛苦。使用eslint规范代码,统一代码风格。

  1. stylelint规范css代码

说到代码格式化前端同学们一般都知道使用eslint格式化js代码,但css大部分同学平时工作中不太重视,导致团队css代码较乱。一套好的css代码不仅可以提高代码可维护性还能提高页面的渲染性能。下面介绍下stylelint校验并自动格式化css代码。

stylelint主要包含以下功能

  • 支持最新css语法-包含自定义属性和一些Level 4的css属性
  • 支持css预处理-包含scss、sass、less、sugarss
  • 包含170中内置规则-包含错误检测和代码风格校验
  • 插件机制-可以自定义自己的规则
  • 自动修复

安装

npm install --save-dev stylelint stylelint-config-standard stylelint-config-recess-order stylelint-order

配置

项目跟目录下新建.stylelintrc.json文件,配置如下

'use strict';
  
module.exports = {  
  "extends": ["stylelint-config-recommended"], 
  "rules":{  
      "unit-no-unknown": false,  
      "unit-no-unknown": true,    //禁止未知单位  
      "indentation": null,       //缩进  
      "color-hex-case": [  
        "lower", {  
        "message": "Lowercase letters are easier to distinguish from numbers"  
        }  
      ],  
      "max-empty-lines": 2,  
      "unit-whitelist": ["em", "rem", "%", "s", "px", "upx", "deg"],  
      "number-leading-zero": null,
      "function-calc-no-invalid": null,
      "no-descending-specificity": null,
      "selector-pseudo-class-no-unknown": null,
      "selector-type-no-unknown": null,
      "at-rule-no-unknown": null,
      "font-family-no-missing-generic-family-keyword": null
  }  
} 

属性顺序

除了格式化方面的检测css属性顺序编写也很重要,正确的样式顺序利于维护者查看同时还对渲染性能有一定提升。一般建议css顺序如下:

(1)定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index
(2)自身属性:width  height  padding  border  margin   background
(3)文字样式:font-family   font-size   font-style   font-weight   font-varient   color   
(4)文本属性:text-align   vertical-align   text-wrap   text-transform   text-indent    text-decoration   letter-spacing    word-spacing    white-space   text-overflow
(5)css3中新增属性:content   box-shadow   border-radius  transform

css顺序校验需要添加stylelint-order插件同时使用stylelint-config-recess-order预设。通过以下配置我们就不需要记这么多css属性书写顺序了。

"extends": ["stylelint-config-recommended", "stylelint-config-recess-order"], 
 "plugins": [
    "stylelint-order"
  ],

自动格式化

上面介绍了stylelint发现有问题的代码,但是如果是老项目引入stylelint手动修改的话要是比较耗费时间的,此时自动格式化就尤为重要了。

package.json中添加配置

  "scripts": {
    "lint": "npm run lint:css",
    "lint:css": "stylelint app/build/style/ --fix"
  },
 "pre-commit": [
    "lint"
  ],
  1. 配置路径别名

模块化开发项目中,比如vue和react等,经常需要import不同的js或者css模块到当前目录,那么如果路径比较深的话使用相对路径就比较麻烦,而且在文件迁移的时候,如果在不同的目录下边,又得改变以下引入的路径。所以我们可以使用webpack配置路径别名,在引入的时候我们直接使用这个别名,就可以正确的指向。

配置

在webpack.config.js中的resolve下的alias属性做以下配置:

resolve: {
        extensions: ['.js', '.jsx', '.json', '.less'],
        alias: {
            '@app': path.resolve('app'),
            '@components': path.resolve('app/build/components'),
            '@images': path.resolve('app/build/images'),
            '@common': path.resolve('app/build/common'),
            '@actions': path.resolve('app/build/actions'),
            '@enums': path.resolve('app/enums'),
            '@styles': path.resolve('app/build/style')
        }
    },

如果需要智能提示跳转到指定文件
需要在根目录下添加jsconfig.js文件,并做如下配置

{
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@app/*": ["app/*"],
        "@components/*": ["app/build/components/*"],
        "@images/*": ["app/build/images/*"],
        "@common/*": ["app/build/common/*"],
        "@actions/*": ["app/build/actions/*"],
        "@enums/*": ["app/enums/*"],
        "@styles/*": ["app/build/style/*"]
      },
      "target": "ES6",
      "module": "commonjs",
      "jsx": "react",
      "allowSyntheticDefaultImports": true
    },
    "include": [
      "app/**/*"
    ],
    "exclude": ["node_modules"]
  }

然后使用

  • @components就可以指向到app/build/components
  • @common指向到app/build/common

使用:

import MultiLockedButton from '@components/view/customer/multi_locked_button.jsx';
import { fetch } from '@common/api';
  1. react项目中,告别binding,支持箭头函数

安装依赖

npm install --save-dev babel-plugin-transform-class-properties

.babelrc中添加配置

"plugins": [ "transform-class-properties"]

使用方法

// 查询
  const handleSearch = (formData) => {
       //your code
   };

5、react项目中支持async

安装依赖

npm install --save-dev babel-plugin-transform-runtime

.babelrc中添加配置

"plugins": ["transform-runtime"]

相关文章

  • 规范代码,提升开发效率,5大绝招解决你的痛点

    使用eslint规范检测 一般在团队开发中每个人的代码习惯都不太一样,这样就会导致代码风格不一致,以致于维护和修改...

  • 代码规范

    团队开发中,遵循一定的代码规范,有利于提升团队开发效率和方便后期维护。常见的代码规范 例如 airbnb[http...

  • HTML和CSS的编码规范

    编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。有效的编码规范,可以提升开发效率。

  • 前端开发规范(通用)

    前端开发规范—通用 规范的目的是为了编写高质量的代码,提升协作效率,降低沟通成本。 一、编程规约 (一)命名规范 ...

  • Shell编程-14-Shell脚本规范及调试

    Shell脚本规范     良好的代码规范不仅方便阅读,也利于维护和提升开发效率。因此建议大家在编写Shell脚本...

  • iOS 开发小技巧总结

    别拿豆包不当干粮。 在iOS日常开发中,往往一个小技巧就可以帮助解决头疼的bug,严谨代码规范,提升编码效率。小技...

  • 4个vsCode 常用插件,提升你的团队开发效率

    4个vsCode 常用插件,提升你的团队开发效率 前端团队协作必不可少,每个公司都有前端代码规范,这些插件在团队协...

  • React Native 代码规范

    本规范主要用于React Native项目,原则是提升效率、规避风险。React/JSX代码规范ES6代码规范项目...

  • 1.3 Android studio 使用技巧--模板1(Liv

    说明 模板的使用,可以大大提升Android开发的效率,同时可以让代码变得更加规范,因此了解模板的使用,很多时候可...

  • 一图看懂spring boot的validatior参数校验

    概述 Validator框架就是为了解决开发人员在开发的时候少写代码,提升开发效率的:专门用来做接口参数的校验的,...

网友评论

      本文标题:规范代码,提升开发效率,5大绝招解决你的痛点

      本文链接:https://www.haomeiwen.com/subject/tzdwpktx.html