In this article, you will find the naming conventions we used in our Heybooster front-end project.
Variable Naming
- The camelCase naming convention is used to define a variable.
Examples
const dataSourceName = '';
const stepsConnectStatus = {
1: false,
2: false,
3: false,
4: false,
};
const apiBaseUrl = {};
const bookmarkID = [];
const loaderStatus = [];
const axiosCancelStatusCodes = [];
const notifications = [];
Props Naming
- The camelCase naming convention is used to define a prop.
Example
props: {
showAll: {
type: Boolean,
default: true
},
},Define a prop
<DataSource showAll="true"/>Pass a props
Computed Property Naming
- The camelCase naming convention is used to define a computed property.
Example
computed:{
background() {
return `bg-${this.priority.type}`;
},
insightCreatedDate(){
return new Date(this.insight.ts * 1000).toLocaleString();
},
},
Method / Function Naming
- The camelCase naming convention is used to define a method/function.
- The camelCase naming convention also used to setters, getters, mutations method in Vuex.
- The camelCase naming convention also used to SCSS mixins.
Examples
function getSourceTypeIcon(sourceType) {
const dataSourceTypesIcons = {
[dataSourceTypes.googleAnalytics]: "google-analytics.svg",
[dataSourceTypes.googleAdwords]: "google-adwords.svg",
[dataSourceTypes.googleSearchConsole]: "google-search.svg",
[dataSourceTypes.facebook]: "facebook.svg",
[dataSourceTypes.shopify]: "shopify.svg",
};
return dataSourceTypesIcons[sourceType];
}Example function
methods: {
resetChartVariables() {
this.activeMetric = null;
this.requestStatus = false;
this.chartTitle = "";
}
}Example method
@mixin setBoxShadow($value){
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}Example SCSS Mixin
Folder Naming
- The kebab-case naming convention is used to define a folder.
cross-tab-communication
crypto-jsExample folders
Component/View Naming
- The PascalCase naming convention is used to define a component or view.
DataSourceChangePopup.vue
MyInsights.vueExample Vue Component Naming
JavaScript/TypeScript File Naming
- The kebab-case naming convention is used to define a javascript/typescript file.
onboarding-pages.js
priority-list.tsExample Javascript/TypeScript File Naming