shoonyatech / frontend.social

Frontend Social website
https://www.frontend.social
MIT License
11 stars 19 forks source link

introduce import order practice in the project #510

Closed kalpeshsingh closed 3 years ago

kalpeshsingh commented 3 years ago

This is part of main issue #457

Motivation

We all are always excited to work on logical part and tweaking code to optimise it further. This is all great and we should do it. Though we should also think about aesthetic of our module imports. Seems like a trivial practice but shows how much we are dedicated about our work.

Import orders I use in my projects

We should logically group imports so that your fellow developers can scan the file quickly for imports.

  1. /* 3P dependency imports /
  2. /* Component dependencies /
  3. /* Data store /
  4. /* Services /
  5. /* Selectors /
  6. /* Helpers /
  7. /* Constants /
  8. /* Styles /

Example

/** 3P dependency imports */
import StarRating from 'vue-star-rating';

/** Component dependencies */
import Comment from '@/components/Comment/Comment'; 
import AddComment from '@/components/Comment/AddComment';   
import ChapterStrip from '@/components/Course/ChapterStrip';

/** Services */
import commentService from '@/services/comment.service';    
import courseService from '@/services/course.service';

/** Helpers */
import eventBus from '@/utilities/eventBus';    

/** Constants */
import { ToastType, messages } from '@/constants/constants';