Our coding standards
MEDomicsLab coding standards
Table of contents
Recommended Software
Windows (10 /11 +), macOs (12 +), Linux (20.04 +) see electron app supported OS
Visual Studio Code extensions:
prettier & eslint - code formatter standardizer (see syntax)
Project Repository Structure
/app
Electron files
/baseFiles
Empty base files
/build
Contains distribution relative files
/go_server
Contains Go code acting as a server
/main
Electron related contents
/node_modules
Contains saved libraries (created from npm install
)
/pythonCode
Python code
/pythonEnv
Python virtual environment utils
/renderer
NextJs related content
/resources
NextJs ressources (icons, etc.)
/utilScripts
NextJs ressources (icons, etc.)
Style
Import order (_app.js)
import 'bootstrap/dist/css/bootstrap.min.css';
import <all other global css libraries>
Naming Conventions
Javascript/react
Component : PascalCase
Component file name : camelCase
Each file name should be the same as the component defined inside
Component creation : prioritize function implementation over class
export default const MyComponent = (someProps) => {
return (<></>)
}
Function creation: prioritize arrow implementation
const myFct = (someParams) => {}
Components Structure
To generate this :
tree .\renderer\components\ /f
Syntax
(ES6 for JS as mentioned by Electron, for Python Electron follows Chromium's Coding Style)
Installation
Install prettier and plugin (should be included in package.json so a
npm install
should do it)npm install prettier eslint-plugin-prettier eslint-config-prettier
Open workspace settings
Can be accessed directly from this path: .vscode/settings.json
Or press
CTRL+SHIFT+P
and typePreferences: Open Workspace Settings (JSON)
Add these lines
{
"eslint.options": {
"overrideConfigFile": ".eslintrc.js"
},
"editor.formatOnSave": true,
"eslint.validate": ["javascript"],
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Usage
There are 2 config files:
eslint -> .eslintrc.js
prettier -> .prettierrc.js
A higher priority is placed on Prettier wich handles basic formatting
see config file for more information on what it rules
then, all standards rules are placed in eslint config file. So if you need to add specific rules, it should be in .eslintrc.js file
Use CTRL+S
to save and format files. Eslint may triggered error displayed as a red underline so you can hover these conventions error, then click on 'quick fix' and click on 'fix all/the problem(s)'
Documentation
Docstring
/**
* @param {type} someParams description
* @return {type} description
* @description
* functionnal description of the function/React object
*/
const myfct = (someParams) => {}
Comments
Do not over-detail the code for readability
Comments are meant to help understand important or critical actions in code
Documentation generation
Not tested : https://www.npmjs.com/package/react-doc-generator
(Comments, docstrings, documentation generator...)
Python Coding Standard
Last updated