0.1.7 • Published 1 year ago
vue-2-poc v0.1.7
Vue project boilerplate
Boilerplate contains:
- vue router
- vuex
- linter
- prettier
- linter
- prettier
- pre commit git hooks
Node version recommendation
Node v16 should be used for development. To install it:
nvm install 16
nvm use 16
⚠️ Note: If you haven't set node 16 as your default node version, you will have to set nvm use 16
every time before spinnging up dev server
Code quality tools
⚠️ Note: If project is not successfully linted, you will be unable to commit
Vscode
Mandatory extensions:
- vetur
- vue (syntax highlight for vue)
- eslint
- prettier
Other useful extensions:
- path intellisense
- auto close tag
- auto rename tag
- barcket pair colorizer 2
- color highlight
After installing mandatory extensions, in your root folder add
.vscode/settings.json
And put this code snippet inside:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Phpstorm
⚠️ You should have PhpStorm 2020.3+
- Install prettier extension
- Settings>Languages and frameworks>Javascript>Code Quality Tools>Eslint
- Automatic ESLint configuration and Run eslint --fix on save ✅(optional)
- Settings>Languages and frameworks>Javascript>Prettier
- Node interpreter: ~/.nvm/versions/node/v16.13.2/bin/node
- Prettier package: ~/path_to_project/node_modules/prettier
- Run for files: {**/*,*}.{js,ts,jsx,tsx,vue}
- On code format: ✅
- On save: ✅
- Settings>Languages and frameworks>Javascript>Webpack
- Automatic: ✅
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint