├── README.md ├── assets └── images │ ├── checks.png │ ├── comment.png │ ├── eslint-config-js.png │ ├── eslint_config.PNG │ ├── gh-actions-eslint-stylelint-checks.png │ ├── gh-actions-html-css-checks.png │ ├── gh-actions-html-css-failing-checks.png │ ├── gh-actions-rspec-tests-checks.png │ ├── gh-actions-rubocop-failing-checks.png │ ├── gh-actions-rubocop-linters-checks.png │ ├── gh-actions-rubocop-stylelint-checks.png │ ├── lighthouse-report.png │ ├── npm-node.png │ ├── result.png │ └── stickler_app_config.png ├── html-css-js ├── .eslintrc.json ├── .github │ └── workflows │ │ └── linters.yml ├── .hintrc ├── .stylelintrc.json └── README.md ├── html-css ├── .github │ └── workflows │ │ └── linters.yml ├── .hintrc ├── .stylelintrc.json └── README.md ├── javascript ├── .eslintrc.json ├── .github │ └── workflows │ │ └── linters.yml ├── .stylelintrc.json └── README.md ├── react-redux ├── .babelrc ├── .eslintrc.json ├── .github │ └── workflows │ │ └── linters.yml ├── .stylelintrc.json └── README.md ├── ror ├── .github │ └── workflows │ │ └── linters.yml ├── .rubocop.yml ├── .stylelintrc.json └── README.md ├── ruby ├── .github │ └── workflows │ │ ├── linters.yml │ │ └── tests.yml ├── .rubocop.yml └── README.md └── scripts ├── README.md └── check-linters-conf.sh /README.md: -------------------------------------------------------------------------------- 1 | # Linters Config 2 | 3 | ## How to use this repo? 🤔 4 | 5 | Each directory listed below contains config files specific to one programming language and README file with detailed instructions: 6 | 7 | - [html&css](./html-css) 8 | - [html&css + javascript](./html-css-js) (for projects that require you to use both JavaScript and HTML & CSS) 9 | - [ruby](./ruby) 10 | - [ror](./ror) 11 | - [javascript](./javascript) 12 | - [react&redux](./react-redux) 13 | 14 | Follow those instructions in order to set up linters or validators in your repo. 15 | 16 | In order to get to know more about linters and GitHub Actions read the recap below. 17 | 18 | ## Linters 19 | 20 | A linter is a tool that analyzes your source code to flag programming errors, bugs, stylistic errors, and suspicious constructs(source: [Wikipedia]()). 21 | 22 | There are a few reasons for using linters: 23 | 24 | 1. Catching syntax errors is more efficient. There is no need to debug simple mistakes like typos - the linter does it for you. 25 | 2. The entire codebase looks like written by one person. 26 | 3. Programmers can focus on solving problems, instead of cleaning up the code. 27 | 28 | --- 29 | 30 | You can find linters for most of the programming languages, e.g. Rubocop for Ruby or ESLint for JavaScript. 31 | 32 | Also, there are many ways you can integrate a linter in your workflow: 33 | 34 | - text editor plugin 35 | - GitHub Actions 36 | - GitHub apps 37 | 38 | ## GitHub Actions 39 | 40 | [Github Actions](https://help.github.com/en/actions) is a [CI/CD](https://codilime.com/what-is-ci-cd-all-you-need-to-know/) service offered by GitHub. It allows you to automate your workflow by letting GitHub take care of a number of tasks which can be triggered by [different of events](https://help.github.com/en/actions/reference/events-that-trigger-workflows) on the platform. 41 | 42 | 🐛 **What to do if GitHub Actions does not work?** Check [Troubleshooting](#troubleshooting) below. 43 | 44 | You can automate tasks by creating **workflows** in your GitHub repository. GitHub will look for [YAML](https://en.wikipedia.org/wiki/YAML) files inside of the `.github/workflows` directory. 45 | 46 | ## Troubleshooting 47 | 48 | Depending on the configuration of your GitHub credentials, you may have an error like this when trying to create a new GitHub Actions workflow: 49 | 50 | ``` 51 | ! [remote rejected] master -> master (refusing to allow an OAuth App to create or update workflow `.github/workflows/file.yml` without `workflow` scope) 52 | 53 | ``` 54 | 55 | The problem is that you may be using a credentials app like [Credential Manager in Windows](https://github.com/gitextensions/gitextensions/issues/4916#issuecomment-557509451) or OSX Keychain. In that case, you should [setup a personal access token](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line) and configure it in your credentials app. Make sure to check the `workflow` permissions when you setup your personal access token. 56 | 57 | If you had a different problem related to a specific tool, please check detailed instructions for each linter: 58 | 59 | - [html&css](./html-css#troubleshooting) 60 | - [ruby](./ruby#troubleshooting) 61 | - [ror](./ror#troubleshooting) 62 | - [javascript](./javascript#troubleshooting) 63 | - [react&redux](./react-redux#troubleshooting) 64 | 65 | ## Validation 66 | 67 | Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students. 68 | 69 | TSEs will validate that you are using the same configuration files provided here. You can check if your linter configuration is correct using the [`check-linters-config`](scripts) script. 70 | 71 | ## Stickler 72 | 73 | This is the **GitHub Actions configuration**. If you are looking for the **Stickler configuration**, you can find it [here](https://github.com/microverseinc/linters-config/tree/Stickler). 74 | 75 | ## Contributing 76 | 77 | Everybody is welcome to suggest changes in linters config files. 78 | 79 | In order to do it, fork this repository, create a new branch and open a Pull Request from your branch. A detailed description of this process: [A Step by Step Guide to Making Your First GitHub Contribution by Roshan Jossey](https://codeburst.io/a-step-by-step-guide-to-making-your-first-github-contribution-5302260a2940) 80 | -------------------------------------------------------------------------------- /assets/images/checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/checks.png -------------------------------------------------------------------------------- /assets/images/comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/comment.png -------------------------------------------------------------------------------- /assets/images/eslint-config-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/eslint-config-js.png -------------------------------------------------------------------------------- /assets/images/eslint_config.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/eslint_config.PNG -------------------------------------------------------------------------------- /assets/images/gh-actions-eslint-stylelint-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/gh-actions-eslint-stylelint-checks.png -------------------------------------------------------------------------------- /assets/images/gh-actions-html-css-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/gh-actions-html-css-checks.png -------------------------------------------------------------------------------- /assets/images/gh-actions-html-css-failing-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/gh-actions-html-css-failing-checks.png -------------------------------------------------------------------------------- /assets/images/gh-actions-rspec-tests-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/gh-actions-rspec-tests-checks.png -------------------------------------------------------------------------------- /assets/images/gh-actions-rubocop-failing-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/gh-actions-rubocop-failing-checks.png -------------------------------------------------------------------------------- /assets/images/gh-actions-rubocop-linters-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/gh-actions-rubocop-linters-checks.png -------------------------------------------------------------------------------- /assets/images/gh-actions-rubocop-stylelint-checks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/gh-actions-rubocop-stylelint-checks.png -------------------------------------------------------------------------------- /assets/images/lighthouse-report.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/lighthouse-report.png -------------------------------------------------------------------------------- /assets/images/npm-node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/npm-node.png -------------------------------------------------------------------------------- /assets/images/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/result.png -------------------------------------------------------------------------------- /assets/images/stickler_app_config.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microverseinc/linters-config/d590a22b46adc7b722a8f6fbaa7e38da6f2f63e2/assets/images/stickler_app_config.png -------------------------------------------------------------------------------- /html-css-js/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /html-css-js/.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.11.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v3 26 | - uses: actions/setup-node@v3 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v3 40 | - uses: actions/setup-node@v3 41 | with: 42 | node-version: "18.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v3 54 | - uses: actions/setup-node@v3 55 | with: 56 | node-version: "18.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v3 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 71 | -------------------------------------------------------------------------------- /html-css-js/.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /html-css-js/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /html-css-js/README.md: -------------------------------------------------------------------------------- 1 | # HTML & CSS3 & JavaScript Course 2 | 3 | If you are not familiar with linters, read [root level README](../README.md). 4 | 5 | ## Set-up GitHub Actions 6 | 7 | Please do the following **steps in this order**: 8 | 9 | 1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder. 10 | - **Remember** to use the file linked above 11 | - **Remember** that `.github` folder starts with a dot. 12 | 2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 13 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 14 | 3. When you open your first pull request you should see the result of the GitHub actions checks: 15 | 16 | ![gh actions checks](../assets/images/gh-actions-html-css-checks.png) 17 | 18 | Click on the `Details` link of each action to see the full output and the errors that need to be fixed: 19 | 20 | ![gh actions failing checks](../assets/images/gh-actions-html-css-failing-checks.png) 21 | 22 | ## Set-up linters in your local env 23 | 24 | **Note**: The `npm` package manager is going to create a `node_modules` directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a [`.gitignore`](https://git-scm.com/docs/gitignore) file and add `node_modules` to it: 25 | 26 | ``` 27 | # .gitignore 28 | node_modules/ 29 | ``` 30 | 31 | ### [Lighthouse](https://developers.google.com/web/tools/lighthouse) 32 | 33 | An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more. 34 | 35 | You can get the Lighthouse report by any of the following ways: 36 | 37 | - [In Chrome DevTools](https://developers.google.com/web/tools/lighthouse#devtools) 38 | - [From the command line](https://developers.google.com/web/tools/lighthouse#cli) 39 | - [As a Node module](https://developers.google.com/web/tools/lighthouse#programmatic) 40 | - [From a web UI](https://developers.google.com/web/tools/lighthouse#psi) 41 | 42 | To access the report generated by Lighthouse on your pull request, click the `Details` link for the `Linters/Lighthouse` check and you will see the full output of the action: 43 | 44 | ![lighthouse report](../assets/images/lighthouse-report.png) 45 | 46 | ### [Webhint](https://webhint.io/) 47 | 48 | A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors. 49 | 50 | **NOTE:** If you are running on Windows, you need to initialize npm to create `package.json` file. 51 | ``` 52 | npm init -y 53 | ``` 54 | 55 | 1. Run 56 | ``` 57 | npm install --save-dev hint@7.x 58 | ``` 59 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 60 | 2. Copy [.hintrc](.hintrc) to the root directory of your project. 61 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 62 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 63 | 4. Run 64 | ``` 65 | npx hint . 66 | ``` 67 | 5. Fix validation errors. 68 | 69 | ### [Stylelint](https://stylelint.io/) 70 | 71 | A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. 72 | 73 | 1. Run 74 | 75 | ``` 76 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 77 | ``` 78 | 79 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 80 | 81 | 2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project. 82 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 83 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 84 | 4. Run `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project. 85 | 5. Fix linter errors. 86 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/usage/options) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 87 | 88 | ### [ESLint](https://eslint.org/) 89 | 90 | 1. Run 91 | ``` 92 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 93 | ``` 94 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 95 | 96 | 2. Copy [.eslintrc.json](./.eslintrc.json) to the root directory of your project. 97 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 98 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 99 | 4. Run `npx eslint .` on the root of your directory of your project. 100 | 5. Fix linter errors. 101 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Eslint](https://eslint.org/docs/latest/user-guide/command-line-interface#fixing-problems) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 102 | -------------------------------------------------------------------------------- /html-css/.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.11.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v3 26 | - uses: actions/setup-node@v3 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v3 40 | - uses: actions/setup-node@v3 41 | with: 42 | node-version: "18.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | nodechecker: 50 | name: node_modules checker 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v3 54 | - name: Check node_modules existence 55 | run: | 56 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 57 | -------------------------------------------------------------------------------- /html-css/.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /html-css/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | 23 | -------------------------------------------------------------------------------- /html-css/README.md: -------------------------------------------------------------------------------- 1 | # HTML & CSS3 Course 2 | 3 | If you are not familiar with linters, read [root level README](../README.md). 4 | 5 | ## Set-up GitHub Actions 6 | 7 | Please do the following **steps in this order**: 8 | 9 | 1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder. 10 | - **Remember** to use the file linked above 11 | - **Remember** that `.github` folder starts with a dot. 12 | 2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 13 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 14 | 3. When you open your first pull request you should see the result of the GitHub actions checks: 15 | 16 | ![gh actions checks](../assets/images/gh-actions-html-css-checks.png) 17 | 18 | Click on the `Details` link of each action to see the full output and the errors that need to be fixed: 19 | 20 | ![gh actions failing checks](../assets/images/gh-actions-html-css-failing-checks.png) 21 | 22 | ## Set-up linters in your local env 23 | 24 | **Note**: The `npm` package manager is going to create a `node_modules` directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a [`.gitignore`](https://git-scm.com/docs/gitignore) file and add `node_modules` to it: 25 | 26 | ``` 27 | # .gitignore 28 | node_modules/ 29 | ``` 30 | 31 | ### [Lighthouse](https://developers.google.com/web/tools/lighthouse) 32 | 33 | An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more. 34 | 35 | You can get the Lighthouse report by any of the following ways: 36 | 37 | - [In Chrome DevTools](https://developers.google.com/web/tools/lighthouse#devtools) 38 | - [From the command line](https://developers.google.com/web/tools/lighthouse#cli) 39 | - [As a Node module](https://developers.google.com/web/tools/lighthouse#programmatic) 40 | - [From a web UI](https://developers.google.com/web/tools/lighthouse#psi) 41 | 42 | To access the report generated by Lighthouse on your pull request, click the `Details` link for the `Linters/Lighthouse` check and you will see the full output of the action: 43 | 44 | ![lighthouse report](../assets/images/lighthouse-report.png) 45 | 46 | ### [Webhint](https://webhint.io/) 47 | 48 | A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors. 49 | 50 | **NOTE:** If you are running on Windows, you need to initialize npm to create `package.json` file. 51 | ``` 52 | npm init -y 53 | ``` 54 | 55 | 1. Run 56 | ``` 57 | npm install --save-dev hint@7.x 58 | ``` 59 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 60 | 2. Copy [.hintrc](.hintrc) to the root directory of your project. 61 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 62 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 63 | 4. Run 64 | ``` 65 | npx hint . 66 | ``` 67 | 5. Fix validation errors. 68 | 69 | ### [Stylelint](https://stylelint.io/) 70 | 71 | A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. 72 | 73 | 1. Run 74 | 75 | ``` 76 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 77 | ``` 78 | 79 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 80 | 81 | 2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project. 82 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 83 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 84 | 4. Run `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project. 85 | 5. Fix linter errors. 86 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/usage/options) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 87 | 88 | ## Have you already completed the Sass lessons? 89 | 90 | If you completed the Sass lessons you may prefer to work with SCSS files, if that's the case you need to perform 91 | a few modifications to the linter configuration files. 92 | 93 | 1. In the file `.github/workflows/linters.yml` [line 48](https://github.com/microverseinc/linters-config/blob/master/html-css/.github/workflows/linters.yml#L48) replace `"**/*.{css,scss}"` with `"**/*.scss"` 94 | 2. Use `npx stylelint "**/*.scss"` to lint you SCSS files and not the generated CSS 95 | 96 | Once you've done the previous steps you can focus on your SCSS files and not in fixing the generated CSS output 97 | every time. 98 | -------------------------------------------------------------------------------- /javascript/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off" 17 | }, 18 | "ignorePatterns": [ 19 | "dist/", 20 | "build/" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /javascript/.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | eslint: 10 | name: ESLint 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup ESLint 18 | run: | 19 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 20 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.eslintrc.json 21 | - name: ESLint Report 22 | run: npx eslint . 23 | stylelint: 24 | name: Stylelint 25 | runs-on: ubuntu-22.04 26 | steps: 27 | - uses: actions/checkout@v3 28 | - uses: actions/setup-node@v3 29 | with: 30 | node-version: "18.x" 31 | - name: Setup Stylelint 32 | run: | 33 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 34 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.stylelintrc.json 35 | - name: Stylelint Report 36 | run: npx stylelint "**/*.{css,scss}" 37 | nodechecker: 38 | name: node_modules checker 39 | runs-on: ubuntu-22.04 40 | steps: 41 | - uses: actions/checkout@v3 42 | - name: Check node_modules existence 43 | run: | 44 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 45 | -------------------------------------------------------------------------------- /javascript/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": [ 9 | "tailwind", 10 | "apply", 11 | "variants", 12 | "responsive", 13 | "screen" 14 | ] 15 | } 16 | ], 17 | "scss/at-rule-no-unknown": [ 18 | true, 19 | { 20 | "ignoreAtRules": [ 21 | "tailwind", 22 | "apply", 23 | "variants", 24 | "responsive", 25 | "screen" 26 | ] 27 | } 28 | ], 29 | "csstree/validator": true 30 | }, 31 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 32 | } 33 | -------------------------------------------------------------------------------- /javascript/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript 2 | 3 | If you are not familiar with linters and GitHub Actions, read [root level README](../README.md). 4 | 5 | ## Set-up GitHub Actions 6 | 7 | This GitHub Action is going to run [ESLint](https://eslint.org/) and [Stylelint](https://stylelint.io/) to help you find style issues. 8 | 9 | [Stylelint](https://stylelint.io/) is a linter for your stylesheets that helps you avoid errors and enforce conventions. 10 | 11 | [ESLint](https://eslint.org/) is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. 12 | 13 | Please do the following **steps in this order**: 14 | 15 | 1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder. 16 | - **Remember** to use the file linked above 17 | - **Remember** that `.github` folder starts with a dot. 18 | 2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 19 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 20 | 3. When you open your first pull request you should see the result of the GitHub Actions: 21 | 22 | ![gh actions checks](../assets/images/gh-actions-eslint-stylelint-checks.png) 23 | 24 | Click on the `Details` link to see the full output and the errors that need to be fixed: 25 | 26 | ![gh actions failing checks](../assets/images/gh-actions-html-css-failing-checks.png) 27 | 28 | ## Set-up linters in your local env 29 | 30 | **Note**: The `npm` package manager is going to create a `node_modules` directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a [`.gitignore`](https://git-scm.com/docs/gitignore) file and add `node_modules` to it: 31 | 32 | ``` 33 | # .gitignore 34 | node_modules/ 35 | ``` 36 | 37 | ### ESLint 38 | 39 | 1. Run 40 | ``` 41 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 42 | ``` 43 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 44 | 2. Copy [.eslintrc.json](./.eslintrc.json) to the root directory of your project. 45 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 46 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 47 | 4. Run `npx eslint .` on the root of your directory of your project. 48 | 5. Fix linter errors. 49 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Eslint](https://eslint.org/docs/latest/user-guide/command-line-interface#fixing-problems) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 50 | 51 | ### Stylelint 52 | 53 | 1. Run 54 | 55 | ``` 56 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 57 | ``` 58 | 59 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 60 | 61 | 2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project. 62 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 63 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 64 | 4. Run `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project. 65 | 5. Fix linter errors. 66 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/usage/options) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 67 | 68 | ## Test/Deployment Actions 69 | 70 | Feel free to add your own deployment actions which can run your tests and deploy to Heroku. 71 | 72 | Make sure that you do not modify the [`.github/workflows/linters.yml`](.github/workflows/linters.yml) but that you create a separe GitHub Action workflow file for that. 73 | -------------------------------------------------------------------------------- /react-redux/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react" 4 | ], 5 | "plugins": ["@babel/plugin-syntax-jsx"] 6 | } -------------------------------------------------------------------------------- /react-redux/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "@babel/eslint-parser", 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "extends": ["airbnb", "plugin:react/recommended", "plugin:react-hooks/recommended"], 16 | "plugins": ["react"], 17 | "rules": { 18 | "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }], 19 | "react/react-in-jsx-scope": "off", 20 | "import/no-unresolved": "off", 21 | "no-shadow": "off" 22 | }, 23 | "overrides": [ 24 | { 25 | // feel free to replace with your preferred file pattern - eg. 'src/**/*Slice.js' or 'redux/**/*Slice.js' 26 | "files": ["src/**/*Slice.js"], 27 | // avoid state param assignment 28 | "rules": { "no-param-reassign": ["error", { "props": false }] } 29 | } 30 | ], 31 | "ignorePatterns": [ 32 | "dist/", 33 | "build/" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /react-redux/.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | eslint: 10 | name: ESLint 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup ESLint 18 | run: | 19 | npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x @babel/plugin-syntax-jsx@7.x @babel/preset-env@7.x @babel/preset-react@7.x 20 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.eslintrc.json 21 | [ -f .babelrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.babelrc 22 | - name: ESLint Report 23 | run: npx eslint "**/*.{js,jsx}" 24 | stylelint: 25 | name: Stylelint 26 | runs-on: ubuntu-22.04 27 | steps: 28 | - uses: actions/checkout@v3 29 | - uses: actions/setup-node@v3 30 | with: 31 | node-version: "18.x" 32 | - name: Setup Stylelint 33 | run: | 34 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 35 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json 36 | - name: Stylelint Report 37 | run: npx stylelint "**/*.{css,scss}" 38 | nodechecker: 39 | name: node_modules checker 40 | runs-on: ubuntu-22.04 41 | steps: 42 | - uses: actions/checkout@v3 43 | - name: Check node_modules existence 44 | run: | 45 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 46 | -------------------------------------------------------------------------------- /react-redux/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /react-redux/README.md: -------------------------------------------------------------------------------- 1 | # React and Redux 2 | 3 | If you are not familiar with linters and GitHub Actions, read [root level README](../README.md). 4 | 5 | ## Set-up GitHub Actions 6 | 7 | This GitHub Action is going to run [ESLint](https://eslint.org/) and [Stylelint](https://stylelint.io/) to help you find style issues. 8 | 9 | [Stylelint](https://stylelint.io/) is a linter for your stylesheets that helps you avoid errors and enforce conventions. 10 | 11 | [ESLint](https://eslint.org/) is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. 12 | 13 | Please do the following **steps in this order**: 14 | 15 | 1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder. 16 | - **Remember** to use the file linked above 17 | - **Remember** that `.github` folder starts with a dot. 18 | 2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 19 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 20 | 3. When you open your first pull request you should see the result of the GitHub Actions: 21 | 22 | ![gh actions checks](../assets/images/gh-actions-eslint-stylelint-checks.png) 23 | 24 | Click on the `Details` link to see the full output and the errors that need to be fixed: 25 | 26 | ![gh actions failing checks](../assets/images/gh-actions-html-css-failing-checks.png) 27 | 28 | ## Set-up linters in your local env 29 | 30 | ### ESLint 31 | 32 | 1. Run 33 | ``` 34 | npm install --save-dev eslint@7.x eslint-config-airbnb@18.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@4.x @babel/eslint-parser@7.x @babel/core@7.x @babel/plugin-syntax-jsx@7.x @babel/preset-react@7.x @babel/preset-react@7.x 35 | ``` 36 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 37 | 2. Copy [.eslintrc.json](./.eslintrc.json) and [.babelrc](./.babelrc) to the root directory of your project. 38 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 39 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 40 | 4. Run `npx eslint "**/*.{js,jsx}"` on the root of your directory of your project. 41 | 5. Fix linter errors. 42 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Eslint](https://eslint.org/docs/latest/user-guide/command-line-interface#fixing-problems) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 43 | 44 | ### Stylelint 45 | 46 | 1. Run 47 | 48 | ``` 49 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 50 | ``` 51 | 52 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 53 | 54 | 2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project. 55 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 56 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 57 | 4. Run `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project. 58 | 5. Fix linter errors. 59 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/usage/options) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 60 | 61 | ## Test/Deployment Actions 62 | 63 | Feel free to add your own deployment actions which can run your tests and deploy to Heroku. 64 | 65 | Make sure that you do not modify the [`.github/workflows/linters.yml`](.github/workflows/linters.yml) but that you create a separe GitHub Action workflow file for that. 66 | -------------------------------------------------------------------------------- /ror/.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | rubocop: 10 | name: Rubocop 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-ruby@v1 15 | with: 16 | ruby-version: 3.1.x 17 | - name: Setup Rubocop 18 | run: | 19 | gem install --no-document rubocop -v '>= 1.0, < 2.0' # https://docs.rubocop.org/en/stable/installation/ 20 | [ -f .rubocop.yml ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/ror/.rubocop.yml 21 | - name: Rubocop Report 22 | run: rubocop --color 23 | stylelint: 24 | name: Stylelint 25 | runs-on: ubuntu-22.04 26 | steps: 27 | - uses: actions/checkout@v3 28 | - uses: actions/setup-node@v3 29 | with: 30 | node-version: "18.x" 31 | - name: Setup Stylelint 32 | run: | 33 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 34 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/ror/.stylelintrc.json 35 | - name: Stylelint Report 36 | run: npx stylelint "**/*.{css,scss}" 37 | nodechecker: 38 | name: node_modules checker 39 | runs-on: ubuntu-22.04 40 | steps: 41 | - uses: actions/checkout@v3 42 | - name: Check node_modules existence 43 | run: | 44 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 45 | -------------------------------------------------------------------------------- /ror/.rubocop.yml: -------------------------------------------------------------------------------- 1 | AllCops: 2 | NewCops: enable 3 | Exclude: 4 | - "db/**/*" 5 | - "bin/*" 6 | - "config/**/*" 7 | - "Guardfile" 8 | - "Rakefile" 9 | - "node_modules/**/*" 10 | 11 | DisplayCopNames: true 12 | 13 | Layout/LineLength: 14 | Max: 120 15 | Metrics/MethodLength: 16 | Include: 17 | - "app/controllers/*" 18 | - "app/models/*" 19 | Max: 20 20 | Metrics/AbcSize: 21 | Include: 22 | - "app/controllers/*" 23 | - "app/models/*" 24 | Max: 50 25 | Metrics/ClassLength: 26 | Max: 150 27 | Metrics/BlockLength: 28 | AllowedMethods: ['describe'] 29 | Max: 30 30 | 31 | Style/Documentation: 32 | Enabled: false 33 | Style/ClassAndModuleChildren: 34 | Enabled: false 35 | Style/EachForSimpleLoop: 36 | Enabled: false 37 | Style/AndOr: 38 | Enabled: false 39 | Style/DefWithParentheses: 40 | Enabled: false 41 | Style/FrozenStringLiteralComment: 42 | EnforcedStyle: never 43 | 44 | Layout/HashAlignment: 45 | EnforcedColonStyle: key 46 | Layout/ExtraSpacing: 47 | AllowForAlignment: false 48 | Layout/MultilineMethodCallIndentation: 49 | Enabled: true 50 | EnforcedStyle: indented 51 | Lint/RaiseException: 52 | Enabled: false 53 | Lint/StructNewOverride: 54 | Enabled: false 55 | Style/HashEachMethods: 56 | Enabled: false 57 | Style/HashTransformKeys: 58 | Enabled: false 59 | Style/HashTransformValues: 60 | Enabled: false 61 | -------------------------------------------------------------------------------- /ror/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": [ 9 | "tailwind", 10 | "apply", 11 | "variants", 12 | "responsive", 13 | "screen" 14 | ] 15 | } 16 | ], 17 | "scss/at-rule-no-unknown": [ 18 | true, 19 | { 20 | "ignoreAtRules": [ 21 | "tailwind", 22 | "apply", 23 | "variants", 24 | "responsive", 25 | "screen" 26 | ] 27 | } 28 | ], 29 | "csstree/validator": true 30 | }, 31 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 32 | } 33 | -------------------------------------------------------------------------------- /ror/README.md: -------------------------------------------------------------------------------- 1 | # Ruby on Rails Course 2 | 3 | If you are not familiar with linters and GitHub Actions, read [root level README](../README.md). 4 | 5 | ## Set-up GitHub Actions 6 | 7 | This GitHub Action is going to run [Rubocop](https://docs.rubocop.org/en/stable/) and [Stylelint](https://stylelint.io/) to help you find style issues. 8 | 9 | [Stylelint](https://stylelint.io/) is a linter for your stylesheets that helps you avoid errors and enforce conventions. 10 | 11 | [Rubocop](https://docs.rubocop.org/en/stable/) is a Ruby static code analyzer (a.k.a. linter) and code formatter. It will enforce many of the guidelines outlined in the community [Ruby Style Guide](https://rubystyle.guide/). 12 | 13 | Please do the following **steps in this order**: 14 | 15 | 1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder. 16 | - **Remember** to use the file linked above 17 | - **Remember** that `.github` folder starts with a dot. 18 | 2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 19 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 20 | 3. When you open your first pull request you should see the result of the GitHub Actions: 21 | 22 | ![gh actions checks](../assets/images/gh-actions-rubocop-stylelint-checks.png) 23 | 24 | Click on the `Details` link to see the full output and the errors that need to be fixed: 25 | 26 | ![gh actions failing checks](../assets/images/gh-actions-rubocop-failing-checks.png) 27 | 28 | ## Set-up linters in your local env 29 | 30 | **Note**: The `npm` package manager is going to create a `node_modules` directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a [`.gitignore`](https://git-scm.com/docs/gitignore) file and add `node_modules` to it: 31 | 32 | ``` 33 | # .gitignore 34 | node_modules/ 35 | ``` 36 | 37 | ### Rubocop 38 | 39 | 1. Add this line to the `Gemfile` 40 | ``` 41 | gem 'rubocop', '>= 1.0', '< 2.0' 42 | ``` 43 | *not sure how to use Gemfile? Read [this](https://bundler.io/v1.15/guides/bundler_setup.html)*. 44 | 2. Run `bundle install`. 45 | 3. Copy [.rubocop.yml](./.rubocop.yml) to the root directory of your project 46 | 4. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 47 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 48 | 5. Run `rubocop`. 49 | 6. Fix linter errors. 50 | 7. **IMPORTANT NOTE**: feel free to research [auto-correct options for Rubocop](https://rubocop.readthedocs.io/en/latest/auto_correct/) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 51 | 52 | ### Stylelint 53 | 54 | 1. Run 55 | 56 | ``` 57 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 58 | ``` 59 | 60 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 61 | 62 | 2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project. 63 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your tem - which is a group of all Microverse students.** 64 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 65 | 4. Run `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project. 66 | 5. Fix linter errors. 67 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/usage/options) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 68 | 69 | ## RSpec/Heroku Actions 70 | 71 | Feel free to add your own deployment actions which can run your tests and deploy to Heroku. 72 | 73 | Make sure that you do not modify the [`.github/workflows/linters.yml`](.github/workflows/linters.yml) but that you create a separe GitHub Action workflow file for that. 74 | 75 | - [GitHub Actions with Ruby on Rails: Setting up Continuous Integration](https://gorails.com/episodes/github-actions-continuous-integration-ruby-on-rails) 76 | - [Deploying to Heroku from GitHub Actions](https://dev.to/heroku/deploying-to-heroku-from-github-actions-29ej) 77 | - [Building a Rails CI pipeline with GitHub Actions](https://boringrails.com/articles/building-a-rails-ci-pipeline-with-github-actions/) 78 | - [Github Actions to run Rubocop and RSpec tests on Rails with Postgres](https://dev.to/abdellani/github-actions-to-run-rubocop-and-rspec-tests-on-rails-with-postgres-47i) 79 | 80 | ## Troubleshooting 81 | 82 | - If you are building an API only Rails application 83 | For API only Rails application you can remove the Stylelint config. To do so remove line no. [23](https://github.com/microverseinc/linters-config/blob/f0c812753d0418288c404ed4a441a2e7370e9f4e/ror/.github/workflows/linters.yml#L23) to [36](https://github.com/microverseinc/linters-config/blob/f0c812753d0418288c404ed4a441a2e7370e9f4e/ror/.github/workflows/linters.yml#L36) from the [linter.yml]((https://github.com/microverseinc/linters-config/blob/master/ror/.github/workflows/linters.yml)) file. -------------------------------------------------------------------------------- /ruby/.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | rubocop: 7 | name: Rubocop 8 | runs-on: ubuntu-22.04 9 | 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-ruby@v1 13 | with: 14 | ruby-version: ">=3.1.x" 15 | - name: Setup Rubocop 16 | run: | 17 | gem install --no-document rubocop -v '>= 1.0, < 2.0' # https://docs.rubocop.org/en/stable/installation/ 18 | [ -f .rubocop.yml ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/ruby/.rubocop.yml 19 | - name: Rubocop Report 20 | run: rubocop --color 21 | -------------------------------------------------------------------------------- /ruby/.github/workflows/tests.yml: -------------------------------------------------------------------------------- 1 | name: Tests 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | rspec: 7 | name: RSpec 8 | runs-on: ubuntu-22.04 9 | steps: 10 | - uses: actions/checkout@v3 11 | - uses: actions/setup-ruby@v1 12 | with: 13 | ruby-version: 3.1.x 14 | - name: Setup RSpec 15 | run: | 16 | [ -f Gemfile ] && bundle 17 | gem install --no-document rspec -v '>=3.0, < 4.0' 18 | - name: RSpec Report 19 | run: rspec --force-color --format documentation 20 | -------------------------------------------------------------------------------- /ruby/.rubocop.yml: -------------------------------------------------------------------------------- 1 | AllCops: 2 | NewCops: enable 3 | Exclude: 4 | - "Guardfile" 5 | - "Rakefile" 6 | - "node_modules/**/*" 7 | 8 | DisplayCopNames: true 9 | 10 | Layout/LineLength: 11 | Max: 120 12 | Metrics/MethodLength: 13 | Max: 20 14 | Metrics/AbcSize: 15 | Max: 50 16 | Metrics/ClassLength: 17 | Max: 150 18 | Metrics/BlockLength: 19 | IgnoredMethods: ['describe'] 20 | Max: 30 21 | 22 | 23 | Style/Documentation: 24 | Enabled: false 25 | Style/ClassAndModuleChildren: 26 | Enabled: false 27 | Style/EachForSimpleLoop: 28 | Enabled: false 29 | Style/AndOr: 30 | Enabled: false 31 | Style/DefWithParentheses: 32 | Enabled: false 33 | Style/FrozenStringLiteralComment: 34 | EnforcedStyle: never 35 | 36 | Layout/HashAlignment: 37 | EnforcedColonStyle: key 38 | Layout/ExtraSpacing: 39 | AllowForAlignment: false 40 | Layout/MultilineMethodCallIndentation: 41 | Enabled: true 42 | EnforcedStyle: indented 43 | Lint/RaiseException: 44 | Enabled: false 45 | Lint/StructNewOverride: 46 | Enabled: false 47 | Style/HashEachMethods: 48 | Enabled: false 49 | Style/HashTransformKeys: 50 | Enabled: false 51 | Style/HashTransformValues: 52 | Enabled: false 53 | -------------------------------------------------------------------------------- /ruby/README.md: -------------------------------------------------------------------------------- 1 | # Ruby Course 2 | 3 | If you are not familiar with linters and GitHub Actions, read [root level README](../README.md). 4 | 5 | ## Set-up Rubocop GitHub Action 6 | 7 | [Rubocop](https://www.rubocop.org/) is a Ruby static code analyzer (a.k.a. linter) and code formatter. It will enforce many of the guidelines outlined in the community [Ruby Style Guide](https://rubystyle.guide/). 8 | 9 | This GitHub Action is going to run [Rubocop](https://docs.rubocop.org/en/stable/) to help you find style issues. 10 | 11 | Please do the following **steps in this order**: 12 | 13 | 1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder. 14 | - **Remember** to use the file linked above 15 | - **Remember** that `.github` folder starts with a dot. 16 | 2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 17 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 18 | 3. When you open your first pull request you should see the result of the GitHub Actions: 19 | 20 | ![gh actions checks](../assets/images/gh-actions-rubocop-linters-checks.png) 21 | 22 | Click on the `Details` link to see the full output and the errors that need to be fixed: 23 | 24 | ![gh actions failing checks](../assets/images/gh-actions-rubocop-failing-checks.png) 25 | 26 | ## [OPTIONAL]Set-up RSpec GitHub Action 27 | 28 | You can run your tests with GitHub Actions to ensure that they are passing before merging a PR. 29 | 30 | To use the GitHub Action to run your tests, please do the following **steps in this order**: 31 | 32 | 1. Add a copy of [`.github/workflows/tests.yml`](.github/workflows/tests.yml) to your `.github/workflows` folder. 33 | - **Remember** to use the file linked above 34 | - Do not modify or delete the [`.github/workflows/linters.yml`](.github/workflows/linters.yml) file that should already be in that folder. 35 | - RSpec by default will try to run any file ending in `_spec.rb` inside the `spec` folder. Make sure to follow this convention for your tests files so `rspec` can run your spec files. 36 | - You can modify the [`.github/workflows/tests.yml`](.github/workflows/tests.yml) file to better fit your custom needs. 37 | 3. When you open your pull request you should see the result of the GitHub Action: 38 | 39 | ![gh actions checks](../assets/images/gh-actions-rspec-tests-checks.png) 40 | 41 | Click on the `Details` link of the test action to check the results of your tests. 42 | 43 | ## Set-up linters in your local env 44 | 45 | ### [RuboCop](https://docs.rubocop.org/en/stable/) 46 | 47 | 1. Add this line to the `Gemfile` 48 | ``` 49 | gem 'rubocop', '>= 1.0', '< 2.0' 50 | ``` 51 | *not sure how to use Gemfile? Read [this](https://bundler.io/v1.15/guides/bundler_setup.html).* 52 | 2. Run `bundle install`. 53 | 3. Copy [.rubocop.yml](./.rubocop.yml) to the root directory of your project 54 | 4. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 55 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 56 | 5. Run `rubocop`. 57 | 6. Fix linter errors. 58 | 7. **IMPORTANT NOTE**: feel free to research [auto-correct options for Rubocop](https://rubocop.readthedocs.io/en/latest/auto_correct/) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 59 | 60 | ## Troubleshooting 61 | 62 | - While using Colorize gem, if you are facing errors with Rspec related to 63 | ```bash 64 | LoadError: 65 | cannot load such file -- colorize 66 | ``` 67 | please remove ```--deployment``` from line no. [26](https://github.com/shubham14p3/Ruby-capstone-project/blob/ca86784cc88bea7c933e329c0953f07e21bcf6ca/.github/workflows/tests.yml#L16) of test.yml file. -------------------------------------------------------------------------------- /scripts/README.md: -------------------------------------------------------------------------------- 1 | # check-linters-confg 2 | 3 | `check-linters-config` is a Bash script to compare local files against the files on the master branch of this repository. It will check that files exist and that they are **identical** to the ones here. 4 | 5 | ## Installation 6 | 7 | 1. Copy the [`check-linters-conf.sh`](check-linters-conf.sh) file into someplace in the `$PATH` of your machine, for example `/usr/local/bin`: 8 | 9 | ``` 10 | sudo wget -O /usr/local/bin/check-linters-config https://raw.githubusercontent.com/microverseinc/linters-config/master/scripts/check-linters-conf.sh 11 | ``` 12 | 13 | 2. Make it executable: 14 | 15 | ``` 16 | sudo chmod +x /usr/local/bin/check-linters-config 17 | ``` 18 | 19 | ## Usage 20 | 21 | Run the command `check-linters-config` on the root of the repository you want to check. It takes as an argument the name of the directory you want to check against. 22 | 23 | ``` 24 | $ check-linters-config ruby 25 | Files master/ruby/.rubocop.yml and .rubocop.yml are identical 26 | ``` 27 | 28 | If you notice differ in your terminal as the following 29 | 30 | 31 | ``` 32 | $ check-linters-config ruby 33 | Files master/ruby/.rubocop.yml and .rubocop.yml differ 34 | ``` 35 | please do not forget to check the contents in the specific linter config files. 36 | 37 | The possible directories/options included are: 38 | 39 | - [html-css](https://github.com/microverseinc/linters-config/tree/master/html-css) 40 | - [javascript](https://github.com/microverseinc/linters-config/tree/master/javascript) 41 | - [react-redux](https://github.com/microverseinc/linters-config/tree/master/react-redux) 42 | - [ror](https://github.com/microverseinc/linters-config/tree/master/ror) 43 | - [ruby](https://github.com/microverseinc/linters-config/tree/master/ruby) 44 | -------------------------------------------------------------------------------- /scripts/check-linters-conf.sh: -------------------------------------------------------------------------------- 1 | #/bin/bash 2 | 3 | base_url="https://raw.githubusercontent.com/microverseinc/linters-config" 4 | branch="master" 5 | usage=" 6 | Usage: check-linters-config dir 7 | 8 | Please provide a valid dir to compare againts. 9 | 10 | Valid options for dir: 11 | html-css 12 | javascript 13 | react-redux 14 | ror 15 | ruby 16 | 17 | Example: check-linters-config ruby 18 | " 19 | 20 | compare () { 21 | directory="$1" 22 | config_files="$2" 23 | for file in "${config_files[@]}"; do 24 | if [ -f "${file}" ]; then 25 | original_file="${branch}/${directory}/${file}" 26 | wget -qO- "${base_url}/${original_file}" | 27 | diff \ 28 | --brief \ 29 | --report-identical-files \ 30 | --ignore-all-space \ 31 | --ignore-blank-lines \ 32 | --strip-trailing-cr \ 33 | --label="${original_file}" \ 34 | - "${file}" 35 | else 36 | echo "File '${file}' is missing" 37 | fi 38 | done 39 | } 40 | 41 | case $1 in 42 | html-css) 43 | config_files=(".hintrc" ".stylelintrc.json") 44 | ;; 45 | ruby) 46 | config_files=(".rubocop.yml") 47 | ;; 48 | ror) 49 | config_files=(".stylelintrc.json" ".rubocop.yml") 50 | ;; 51 | javascript | react-redux) 52 | config_files=(".stylelintrc.json" ".eslintrc.json") 53 | ;; 54 | *) 55 | echo "$usage" 56 | exit 1 57 | esac 58 | 59 | compare "$1" "${config_files[@]}" 60 | --------------------------------------------------------------------------------