Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add eslintrc file #13

Merged
merged 1 commit into from Dec 31, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .travis.yml
Expand Up @@ -11,4 +11,4 @@ deploy:
provider: npm
email: "dionmaicon@outlook.com"
api_key: $npm_token
tag: beta
# tag: beta
163 changes: 77 additions & 86 deletions README.md
@@ -1,5 +1,5 @@
# vue-crudgen
CRUD (Create, Read, Update and Delete) basic generator for Vue.js
CRUD (Create, Read, Update and Delete) basic generator for Vue.js - Beta.

[![Coverage Status](https://coveralls.io/repos/github/dionmaicon/vue-crudgen/badge.svg?branch=master)](https://coveralls.io/github/dionmaicon/vue-crudgen?branch=master)
[![Build Status](https://travis-ci.org/dionmaicon/vue-crudgen.svg?branch=master)](https://travis-ci.org/dionmaicon/vue-crudgen)
Expand All @@ -8,19 +8,25 @@ CRUD (Create, Read, Update and Delete) basic generator for Vue.js
[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=dionmaicon_vue-crudgen&metric=duplicated_lines_density)](https://sonarcloud.io/dashboard?id=dionmaicon_vue-crudgen)
[![Quality gate](https://sonarcloud.io/api/project_badges/quality_gate?project=dionmaicon_vue-crudgen)](https://sonarcloud.io/dashboard?id=dionmaicon_vue-crudgen)

The focus this package is front-end with vue..
The focus this package is front-end with vue.

Best practices for better RESTful API:
Next Releases:
- Vuetify
- Typescript

![image](https://user-images.githubusercontent.com/19849921/51780016-45660880-20f2-11e9-9d59-dec28b1bc5aa.png)
Best practices for better RESTful API:

| Resource | GET (Read) | POST (Create) | PUT (Update) | DELETE (Delete) |
| ------------- | ------------- |------------- | ------------- |------------- |
| /users | Return a list of Users | Create a new User | Bulk Update of Users | Delete all Users |
| /users/123 | Returns a Specific User | (405) | Update a Specific User | Delete a Specific User |

Result for a model generate for this tool:

![vue-crudgen-laptop with hidpi screen](https://user-images.githubusercontent.com/19849921/51761375-05803080-20b4-11e9-9cab-055008397c32.png)


Install Vue CLI and Vue-Crudgen.
Install Vue-CLI and Vue-Crudgen.
```
npm install -g @vue/cli
npm install -g vue-crudgen
Expand All @@ -29,22 +35,34 @@ npm install -g vue-crudgen

How to do?

First of all, You need create a Vue-project and set up your structure of files. My default configurations is babel, pwa, router, vuex, eslint, unit-jest.
You need to create a Vue-project and setup your structure of files. My Recomended configuration is: Babel, PWA, Router, Vuex, Eslint and Unit-Jest.
```
vue create <your-project>
vue create <your-project-name>

```
Now init Vue-Crudgen structure project pattern.

IMPORTANT!! Vue crud Generator uses eslint to prettier/vue code. Check dependencies. You need to create or edit an .eslintrc.js file.

```
//.eslintrc.js
...
'extends': [
'plugin:prettier/recommended',
'plugin:vue/essential',
],
...
```

Now init Vue-Crudgen structure project pattern.
```
cd <you-root-project-path>
vue-crudgen -i
```
After run the command just wait some seconds for scaffold and lint.
Now you need to create models.
```
mkdir models
cd models
mkdir src/models
cd src/models
touch author.js
```
Files *.js models objects should be named in singular.
Expand Down Expand Up @@ -82,91 +100,65 @@ After create a model, execute at command line:
```
vue-crudgen -m ./src/models/
```
IMPORTANT!! Vue crud Generator uses eslint to prettier/vue code. Check dependencies.

After run, you will see something like this in your project structure:
```
//.eslintrc
...
'extends': [
'plugin:prettier/recommended',
'plugin:vue/essential',
],
...
```
Example:
```
./
project/
├── babel.config.js
├── jest.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   └── index.html
│   ├── img
│   ├── index.html
│   └── robots.txt
├── README.md
└── src
├── assets
│   └── logo.png
├── App.vue
├── main.js
├── router
| ├──index.js
├── services
├──service.js
├── models
│   ├── user.js
│   ├── src
│   | ├── App.vue
│   | ├── assets
│   | |  └── logo.png
│   | ├── components
│   | │   ├── author
│   | │   └── HelloWorld.vue
│   | ├── helpers
│   | │   └── alert.vue
│   | ├── main.js
│   | ├── models
│   | │   └── author.js
│   | ├── registerServiceWorker.js
│   | ├── router
│   | │   └── index.js
│   | ├── routes
│   | │   ├── author.js
│   | │   └── index.js
│   | ├── services
│   | │   ├── author.js
│   | │   └── httpService.js
│   | ├── store
│   | │   ├── index.js
│   | │   └── modules
│   | └── views
│   | ├── About.vue
│   | └── Home.vue
└── tests
└── unit
```
You still have to create a .env file with your API base url or edit httpService.js in services directory.
```
VUE_APP_BASE_URL=http://localhost:8081
```
Now in your root project, start the app and browse to http://localhost:8080/author.

```
npm run serve

```
Execute in root of the project:

```
vue-crudgen -m ./src/models/
```

Will be generate the follow:

```
./
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
├── assets
│   └── logo.png
├── components
│   ├── author
│   │   ├── AuthorCreate.vue
│   │   ├── AuthorEdit.vue
│   │   ├── AuthorForm.vue
│   │   ├── AuthorIndex.vue
│   │   └── AuthorView.vue
├── helpers
│   └── alert.vue
├── App.vue
├── main.js
├── router
| ├──index.js
├── routes
| ├──author.js
| ├──index.js
├── services
| ├──author.js
| ├──service.js
├── store
| ├──modules
| | ├──author.js
| | ├──index.js
| ├──index.js
├── models
│   ├── author.js
|
```
Others models:

```
``` javascript
//book.js

const resource = {
endPoint: "books"
};
Expand Down Expand Up @@ -202,10 +194,10 @@ const model = {
options: ["price", "ISBN"]
}
};

module.exports = { model, resource };
```


``` javascript
//publishing.js

const resource = {
Expand All @@ -220,5 +212,4 @@ const model = {
};

module.exports = { model, resource };

```
2 changes: 1 addition & 1 deletion js/bootstrap/form.js
Expand Up @@ -125,7 +125,7 @@ const Form = class {
<script>
import { get${capitalizedName} } from "@/services/${this.modelName}";
relationsImport
import { mapActions, mapGetters } from "vuex";
import { mapActions } from "vuex";

dataImport

Expand Down
5 changes: 4 additions & 1 deletion js/bootstrap/index.js
Expand Up @@ -126,7 +126,7 @@ const Index = class {
this.$router.push({ name: "${this.modelName}Edit", params: { id: id }})
},
async remove(id){
let option = await this.$modal.show({title: "Danger", message: "Do you sure that want delete this ${this.modelName}? This operation is irreversible!" , alert : "danger"});
let option = await this.$modal.show({title: "Danger", message: "Do you want delete this ${this.modelName}?" , alert : "danger"});
if(option){
this.delete${capitalizedName}(id)
.then( response => {
Expand Down Expand Up @@ -207,6 +207,9 @@ const Index = class {
</script>

<style lang="css" scoped>
.container {
text-align: left;
}
.options-button {
float: right;
min-width: 100px;
Expand Down
40 changes: 40 additions & 0 deletions js/eslint/eslintrc.js
@@ -0,0 +1,40 @@
const Eslintrc = class {
constructor() {}

getTemplate() {
let template = `
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:prettier/recommended',
'plugin:vue/essential'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
`;

return template;
}
};

module.exports = Eslintrc;
36 changes: 31 additions & 5 deletions js/init.js
Expand Up @@ -4,30 +4,44 @@ const IndexRouter = require("./router/indexRouter.js");
const HttpService = require("./service/httpService.js");
const IndexStore = require("./store/indexStore.js");
const IndexModule = require("./store/indexModule.js");
const Eslintrc = require("./eslint/eslintrc.js");

const Init = class {
constructor(config) {
this.config = config;
}

generate() {
this.createRoutesStruct();
this.createRouterStruct();
this.createIndexRoutesStruct();
this.createServicesStruct();
this.createStoreStruct();
this.createModulesStruct();
// this.createTemplateApp();
this.createTemplateAlert();
this.createTemplateMain();
this.createTemplateEslintrc();
}

async createRoutesStruct() {
async createIndexRoutesStruct() {
const indexRouter = new IndexRouter();
const indexTemplate = indexRouter.getTemplate();
const indexTemplate = indexRouter.getIndexRouterTemplate();
fs.writeFile(this.config.pathRoutes + "/index.js", indexTemplate, err => {
if (err) {
console.error(err);
} else {
console.log("Router file was create with success!");
console.log("Routes Index file was create with success!");
}
});
}

async createRouterStruct() {
const indexRouter = new IndexRouter();
const indexTemplate = indexRouter.getRouterTemplate();
fs.writeFile(this.config.pathRouter + "/index.js", indexTemplate, err => {
if (err) {
console.error(err);
} else {
console.log("Router Index file was create with success!");
}
});
}
Expand Down Expand Up @@ -143,6 +157,18 @@ const Init = class {
}
});
}

async createTemplateEslintrc() {
const eslintrc = new Eslintrc();
const eslintrcTemplate = eslintrc.getTemplate();
fs.writeFile("./.eslintrc.js", eslintrcTemplate, err => {
if (err) {
console.error(err);
} else {
console.log("eslintrc.js file was create with success!");
}
});
}
};

module.exports = Init;