We use different naming style to different types of files and directories.
- Naming components and views with PascalCase. Component directories also follow this rule. e.g.,
DatabaseOverviewPanel.vue,DatabaseDetail.vue,ActivityTable/ActivityCommentLink.vue. - If a file's default export is a class, use PascalCase, too. e.g.,
DatabaseSchemaUpdateTemplate.ts. - Naming composable function files with camelCase prefixed by "use". e.g.,
composables/useSQLEditorConnection.ts. - Naming other files and directories with lower case kebab-case. e.g.,
data-source-type.ts,fe-style-guide.md,store/mutation-types.ts.
We write vue components with Composition API. It's easier and more practical to extract reusable logic as composable functions than mixins.
We also recommend to use it together with the <script setup> syntax in Single-File Components.
We prefer templates rather than JSX. Since templates are better optimized in compile stage of Vue 3. It also helps us to simplify the compile and build toolchain. And we benefits from Vue Single-File Components.
We recommend using a "local state" pattern when components mutate their properties or provide a v-model property. This also helps us to avoid complaints from vue/no-mutating-props.
See BBSwitch as an example of this pattern.
We are using Vue, TypeScript and Tailwind CSS. Following their recommended style guide improves consistency. Especially when introducing new 3rd-party dependencies.
We are using ESLint and Prettier as our lint and format tools. plugin:vue/vue3-recommended as our default lint rules.
See the configuration file to learn more about the rules.