├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .gitignore ├── .npmrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── __tests__ └── index.test.js ├── docs ├── 00-eslint-cli-setup.md ├── 01-vscode-setup.md ├── README.md └── images │ ├── eslint-cli-setup │ ├── 01-npm-version.png │ ├── 02-npm-init.png │ ├── 03-npm-i-eslint.png │ ├── 04-eslint-init.png │ ├── 05-eslint-bad-code.png │ └── 06-npm-run-script-eslint.png │ └── vscode-setup │ ├── 01-vscode-eslint-ext.png │ ├── 02-eslint-plugins.png │ └── 03-vscode-lint.png ├── index.js └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | 16 | [*.yml] 17 | indent_style = space 18 | indent_size = 2 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true, 4 | "node": true 5 | }, 6 | "extends": [ 7 | "plugin:wordpress/recommended" 8 | ], 9 | "parserOptions": { 10 | "sourceType": "module" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | package-lock.json 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | save-prefix=~ 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - '8' 5 | - '10' 6 | cache: 7 | directories: 8 | - $HOME/.npm 9 | - node_modules 10 | before_install: 11 | - npm install -g npm@latest 12 | after_success: npm run coveralls 13 | notifications: 14 | slack: 15 | secure: dFskGYeF2Rmb0NVi2wIDjUup4E4gDFJYuY/M696un7OzvZtNkpV6Ey7v0VKnWT1IgWsQKMeqtj1B2/egp8J/ePLBm3CUMs4y3uF1g9meZ+MPMEVVYK9IyKIVi/mmH8PJYwuDYS0sFfdEvF+jD2dYM8KlpyZTL9XroAfNy/Qyjb+I5m3flU6bdWq58bOCcMS+ozM5ikyWKQ5weE6P5Q3pawccMAHd3K+P4egh6AU7e8jcCVXoreI3HyP/MNMm7OkZ5k+h8gajZ6pIHJM0HQGRBz+rEoDyBDs6Cfwm1kYoGkGjCh6hxbBf/OMJzzFWloKjDs4qltEw1sZ8XPK86uGRPpLLpiP3EYHMmNqKp4yj9KpUx5e4+HU7Uxme2epHdTWiFT+KJ/flx7TDHXTl51FXW/tmKZZXI0HNCPCP+qLDcx5YqWGQVwh+9pZ+ExZd7gID1RzEH1b76t3GFA9AHEXd6RzC0ydKwVQPQy/6ljg6SSlOaPmNkTzY1MY7GyQK2DXamMzsM7MxyRHHUFeF7MXPzwPsvJrH/grCkMCbUbY6s7xxWWjE+1muuZj3mJ3tb69adofx8IKVCXc5E4w5RNkH514z3iJ2khILuvSHNvwwcfVxzlK0nf7iH7CdmHsw92AEhbAPOtMqLzjuv0FAg+LvK3ewqcc1Ni8h0OcswxQ70tM= 16 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # HEAD 2 | 3 | * chore: Bump minimum Node.js required version to `8.9.3` 4 | * chore: Switch from AVA to Jest for tests. 5 | 6 | # 2.0.0 7 | 8 | * fix: Use `eslint-plugin-wordpress/jssc` shared configuration. 9 | 10 | # 1.1.0 11 | 12 | * feat: Add `one-var` and `no-trailing-spaces` rules. 13 | 14 | # 1.0.0 15 | 16 | * fix: Use `eslint-plugin-wordpress/jshint` shared configuration. 17 | * chore: Removed NodeJS 0.10.x support, `eslint` and `eslint-config-wordpress` now require NodeJS > 4.2.1 LTS or greater 18 | 19 | # 0.1.0 20 | 21 | * Initial release 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Stephen Edgar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # eslint-config-wordpress 2 | 3 | [WordPress JavaScript Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/) shareable config for ESLint. 4 | 5 | ## Deprecated 6 | 7 | This package has been deprecated, please use [@wordpress/eslint-plugin](https://www.npmjs.com/package/@wordpress/eslint-plugin) or [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts) 8 | 9 | ## Installation 10 | 11 | ```console 12 | $ npm install eslint-config-wordpress 13 | ``` 14 | 15 | ## Usage 16 | 17 | Add this to your `.eslintrc.json` file: 18 | 19 | ```json 20 | "extends": "wordpress" 21 | ``` 22 | 23 | If you are using YAML or JavaScript for your [ESLint configuration file format](http://eslint.org/docs/user-guide/configuring#configuration-file-formats) ensure you use the correct syntax for the language used. 24 | 25 | ## [License](LICENSE) 26 | -------------------------------------------------------------------------------- /__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const isPlainObj = require( 'is-plain-obj' ); 4 | 5 | test( 'index.js', () => { 6 | const conf = require( '../index.js' ); 7 | expect( isPlainObj( conf ) ).toBe( true ); 8 | expect( isPlainObj( conf.env ) ).toBe( true ); 9 | expect( isPlainObj( conf.globals ) ).toBe( true ); 10 | expect( isPlainObj( conf.rules ) ).toBe( true ); 11 | }); 12 | -------------------------------------------------------------------------------- /docs/00-eslint-cli-setup.md: -------------------------------------------------------------------------------- 1 | This will guide you through installing ESLint and WordPress Config for your 2 | project and linting files through command line. 3 | 4 | > If you are familiar with `Node` and `NPM` skip to the [second part](#2-install-eslint-with-npm). 5 | 6 | The guide assumes you are familiar with Terminals and basics of Terminal 7 | commands. Both Linux and OSX comes with their own terminal app which you can 8 | use. For Windows, it is recommended to use [Git Bash](https://git-scm.com/downloads). 9 | 10 | If you just want to see a setup, check [this repository](https://github.com/swashata/eslint-wordpress-test). 11 | 12 | ---------------- 13 | ## Table of Contents 14 | 15 | * [1: Setup Node, NPM and package.json](#1-setup-node-npm-and-packagejson) 16 | * [1.1: Install Nodejs and NPM](#11-install-nodejs-and-npm) 17 | * [1.2: Initiate package.json](#12-initiate-packagejson) 18 | * [Bonus Tip: SCM integration](#bonus-tip-scm-integration) 19 | * [2: Install ESLint with NPM](#2-install-eslint-with-npm) 20 | * [2.1: Install Dependencies](#21-install-dependencies) 21 | * [2.2: Initialize ESLint](#22-initialize-eslint) 22 | * [Bonus Tip: Config inside package.json](#bonus-tip-config-inside-packagejson) 23 | * [2.3: Tell ESLint to use WordPress Config](#23-tell-eslint-to-use-wordpress-config) 24 | * [3: Lint JavaScript files from CLI](#3-lint-javascript-files-from-cli) 25 | * [Bonus Tip: Autofix Errors](#bonus-tip-autofix-errors) 26 | * [4: Creating NPM Scripts](#4-creating-npm-scripts) 27 | 28 | ------------------ 29 | 30 | ## 1: Setup Node, NPM and `package.json` 31 | 32 | The [documentation](https://eslint.org/docs/user-guide/getting-started) at ESLint 33 | is really a great place to start, but for new users it can be a little 34 | overwhelming. So just follow this guide through and you will be up and running 35 | in no time. 36 | 37 | > Although we can have both local and global installation of ESLint we will 38 | write the guide for local installation as this is very flexible for project 39 | configuration. 40 | 41 | ### 1.1: Install Nodejs and NPM 42 | 43 | If you haven't already installed [Nodejs](https://nodejs.org/en/) install it by 44 | going to the [official website](https://nodejs.org/en/) and downloading and 45 | installing the appropriate package for your Operating System. If you want to 46 | you can also use any [supported package manager](https://nodejs.org/en/download/package-manager/) 47 | for your OS and install through that. 48 | 49 | Once installed this will give you both **Nodejs** (A JavaScript Runtime Engine) 50 | and **NPM** (Node Package Manager). 51 | 52 | You can open a terminal and type 53 | 54 | ```bash 55 | node --version 56 | npm --version 57 | ``` 58 | 59 | ![NPM Version](images/eslint-cli-setup/01-npm-version.png) 60 | 61 | to confirm you have the latest versions installed. 62 | 63 | ### 1.2: Initiate `package.json` 64 | 65 | Now navigate to the directory where you would like to use ESLint and initialize 66 | `package.json` by running the command below. 67 | 68 | ```bash 69 | npm init 70 | ``` 71 | 72 | ![NPM INIT](images/eslint-cli-setup/02-npm-init.png) 73 | 74 | This will ask you a bunch of questions, answer them accordingly and you will find 75 | a `package.json` file in your directory or git repository. 76 | 77 | #### Bonus Tip: `SCM` integration 78 | 79 | * You should commit the `package.json` and `package-lock.json` file with your SCM. 80 | * You almost never need to commit the `node_modules` directory to your SCM as 81 | anyone in your team can `npm install` to get the dependencies. 82 | 83 | Add the following line to your `.gitignore` file (or create one if it does not 84 | exist). 85 | 86 | ```text 87 | node_modules/ 88 | ``` 89 | 90 | A complete list of files for Nodejs environment can be found [here](https://github.com/github/gitignore/blob/master/Node.gitignore). 91 | 92 | 93 | ## 2: Install ESLint with NPM 94 | 95 | Now that we have `node` and `npm` setup and configured for our project we need 96 | to add `eslint` and the `eslint-config-wordpress` as our project's development 97 | dependency. 98 | 99 | ### 2.1: Install Dependencies 100 | 101 | Navigate to your Project Directory (where you created the `package.json` file). 102 | ```bash 103 | cd ~/myProject 104 | ``` 105 | 106 | Install packages with NPM. 107 | ```bash 108 | npm install eslint eslint-config-wordpress -D 109 | ``` 110 | 111 | ![Install ESLint](images/eslint-cli-setup/03-npm-i-eslint.png) 112 | 113 | Now if you check your `package.json` file you will find the packages in your 114 | `devDependencies`. 115 | 116 | ```json 117 | { 118 | // ... 119 | "devDependencies": { 120 | "eslint": "^4.18.2", 121 | "eslint-config-wordpress": "^2.0.0" 122 | } 123 | } 124 | ``` 125 | 126 | ### 2.2: Initialize ESLint 127 | 128 | To make ESLint work, we need to create an `eslintrc.js` or similar 129 | [configuration](https://eslint.org/docs/user-guide/configuring) file. While we 130 | can create it manually, ESLint does provide an automated process. 131 | 132 | From your Project Directory, run the command below. 133 | 134 | ```bash 135 | node_modules/.bin/eslint --init 136 | ``` 137 | 138 | ![ESLint INIT](images/eslint-cli-setup/04-eslint-init.png) 139 | 140 | This will create a `.eslintrc.js` or similar file in your project directory 141 | from where ESLint will find the configuration. 142 | 143 | #### Bonus Tip: Config inside `package.json` 144 | 145 | If you do not wish to have a separate `.eslintrc.js` file, you can copy the 146 | configuration inside the file inside `eslintConfig` property of `package.json` 147 | file. 148 | 149 | ```json 150 | { 151 | // ... 152 | "devDependencies": { 153 | "eslint": "^4.18.2", 154 | "eslint-config-wordpress": "^2.0.0" 155 | }, 156 | "eslintConfig": { 157 | "env": { 158 | "browser": true, 159 | "es6": true 160 | }, 161 | "extends": "eslint:recommended", 162 | "parserOptions": { 163 | "ecmaFeatures": { 164 | "experimentalObjectRestSpread": true 165 | }, 166 | "sourceType": "module" 167 | }, 168 | "rules": { 169 | "indent": [ 170 | "error", 171 | "tab" 172 | ], 173 | "linebreak-style": [ 174 | "error", 175 | "unix" 176 | ], 177 | "quotes": [ 178 | "error", 179 | "single" 180 | ], 181 | "semi": [ 182 | "error", 183 | "always" 184 | ] 185 | } 186 | } 187 | } 188 | ``` 189 | 190 | ### 2.3: Tell ESLint to use WordPress Config 191 | 192 | Now with everything installed, we need to tell ESLint specifically to use 193 | `wordpress` config. Note that right now, in our ESLint config, we have 194 | 195 | ```json 196 | { 197 | // ... 198 | "extends": "eslint:recommended", 199 | // ... 200 | } 201 | ``` 202 | 203 | Change it to 204 | 205 | ```json 206 | { 207 | // ... 208 | "extends": "wordpress", 209 | // ... 210 | } 211 | ``` 212 | 213 | And you are all set. 214 | 215 | ## 3: Lint JavaScript files from CLI 216 | 217 | Now that we are all setup, it is time to Lint our code. 218 | 219 | Say you have a file inside your Project Directory called `bad-code.js` 220 | with following code. 221 | 222 | ```js 223 | var myVar = ['I', 'am', 'array'] 224 | for(const i of myVar) { 225 | console.log(myVar[i]); 226 | } 227 | ``` 228 | 229 | Now to lint it, from your terminal type 230 | 231 | ```bash 232 | node_modules/.bin/eslint bad-code.js 233 | ``` 234 | 235 | And see all the error and warning output. 236 | 237 | ![ESLint badcode](images/eslint-cli-setup/05-eslint-bad-code.png) 238 | 239 | #### Bonus Tip: Autofix Errors 240 | 241 | Now if you want, you can autofix most of the bad codes with a `--fix` option. 242 | 243 | Simply from your terminal, run again 244 | 245 | ```bash 246 | node_modules/.bin/eslint bad-code.js --fix 247 | ``` 248 | 249 | and see the code getting converted into 250 | 251 | ```js 252 | var myVar = [ 'I', 'am', 'array' ]; 253 | for ( const i of myVar ) { 254 | console.log( myVar[i] ); 255 | } 256 | ``` 257 | 258 | ## 4: Creating NPM Scripts 259 | 260 | Typing the commands can be a bit overwhelming. Luckily we have an option called 261 | [`npm-scripts`](https://docs.npmjs.com/misc/scripts). Edit your `package.json` 262 | file to include the following directives. 263 | 264 | ```json 265 | { 266 | // ... 267 | "scripts": { 268 | // ... 269 | "eslint": "eslint *.js", 270 | "eslintfix": "eslint *.js --fix" 271 | }, 272 | // ... 273 | } 274 | 275 | ``` 276 | 277 | ![npm run-script](images/eslint-cli-setup/06-npm-run-script-eslint.png) 278 | 279 | Now you can run 280 | 281 | ```bash 282 | npm run-script eslint 283 | ``` 284 | 285 | to lint all `*.js` files at once and 286 | 287 | ```bash 288 | npm run-script eslintfix 289 | ``` 290 | 291 | to fix the errors. 292 | -------------------------------------------------------------------------------- /docs/01-vscode-setup.md: -------------------------------------------------------------------------------- 1 | This will guide you to use ESLint within [VSCode](https://code.visualstudio.com/) 2 | (A lightweight IDE) with `eslint-config-wordpress` settings. 3 | 4 | -------- 5 | 6 | ## Table of Contents 7 | 8 | * [1: Install ESLint VSCode Extension](#1-install-eslint-vscode-extension) 9 | * [2: Enable VSCode config](#2-enable-vscode-config) 10 | * [2.1: Edit VSCode User Settings](#21-edit-vscode-user-settings) 11 | * [2.2: Install Additional ESLint Plugins](#22-install-additional-eslint-plugins) 12 | * [Bonus Tip: Using Multiple Config](#bonus-tip-using-multiple-config) 13 | * [3: Autofix js files on save](#3-autofix-js-files-on-save) 14 | * [Bonus Tip: editor.formatOnSave](#bonus-tip-editorformatonsave) 15 | * [4: Bonus .eslintrc.js config file](#4-bonus-eslintrcjs-config-file) 16 | 17 | -------- 18 | 19 | ## 1: Install ESLint VSCode Extension 20 | 21 | For ESLint to work inside VSCode, we need the [ESLint VSCode Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). 22 | 23 | Go to the link above while VSCode is open and click the `Install` button. 24 | The editor will prompt you to install the extension. 25 | 26 | Alternatively, you can also click on the Extension icon under VSCode and search 27 | for `ESLint` by the author `Dirk Baeumar`. 28 | 29 | ![VSCode ESLint Extension](images/vscode-setup/01-vscode-eslint-ext.png) 30 | 31 | The best thing about this extension is that it will first try to use local `ESLint` 32 | and if not found, then it will try for globally installed `ESLint`. 33 | 34 | ## 2: Enable VSCode config 35 | 36 | Once ESLint is installed reload or restart VSCode to get it configured. Do note 37 | that this guide assumes 38 | 39 | 1. You are installing `ESLint` locally in your Package Directory with `npm` or 40 | `yarn`. If not, go through [this guide](00-eslint-cli-setup.md) first. 41 | 2. The same Package Directory is configured as 42 | [VSCode Workspace](https://code.visualstudio.com/docs/editor/multi-root-workspaces). 43 | 3. Within your project configuration, either through `package.json` or `.eslintrc.js` 44 | file, you have set `wordpress` as the `"extends"` option of ESLint. 45 | 46 | ```js 47 | { 48 | ... 49 | "extends": "wordpress", 50 | ... 51 | } 52 | ``` 53 | 54 | ### 2.1: Edit VSCode User Settings 55 | 56 | From VSCode open your `User Settings` 57 | (⌘+, for mac, Ctrl+, for rest). 58 | 59 | Now add/edit the following configuration to your `User Settings`. 60 | 61 | ```json 62 | "eslint.enable": true, 63 | "eslint.alwaysShowStatus": true, 64 | "eslint.validate": [ 65 | "javascript", 66 | "javascriptreact", 67 | "html" 68 | ], 69 | ``` 70 | 71 | What it essentially does is, enables `eslint` inside VSCode and ESLints `.js`, 72 | `.html` and `.jsx` files. Which files get "ESLint"ed is configured through 73 | `eslint.validate` option. Here you simply put [language identifier](https://code.visualstudio.com/docs/languages/overview#_language-id). 74 | 75 | If you want to enable ESLint inside `markdown` then simply add `"markdown"` in 76 | the `"eslint.validate"` array. 77 | 78 | ```json 79 | "eslint.enable": true, 80 | "eslint.alwaysShowStatus": true, 81 | "eslint.validate": [ 82 | "javascript", 83 | "javascriptreact", 84 | "html", 85 | "markdown" 86 | ], 87 | ``` 88 | 89 | But ESLinting files other than `.js` requires additional plugins which we will 90 | discuss now. 91 | 92 | ### 2.2: Install Additional ESLint Plugins 93 | 94 | ESLint can lint `.js` files fine right out of the box. But when we are talking 95 | about editor integration, we expect to link `JavaScript` inside `.html` and 96 | possibly `.jsx` files too. For this, we need to add a few plugins. In this 97 | guide, we will see how to use 98 | [`eslint-plugin-html`](https://www.npmjs.com/package/eslint-plugin-html) and 99 | [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react) to 100 | lint `.html` and `.jsx` files. You can find similar plugins and configuration 101 | for [`markdown`](https://www.npmjs.com/package/eslint-plugin-markdown) too. 102 | 103 | First install the needed plugins as `devDependencies` with `npm`. 104 | 105 | ```bash 106 | npm install eslint-plugin-html eslint-plugin-react -D 107 | ``` 108 | 109 | ![ESLint Plugins](images/vscode-setup/02-eslint-plugins.png) 110 | 111 | Now enable the plugins inside your `.eslintrc.js` file or `package.json` file. 112 | 113 | ```json 114 | { 115 | ... 116 | "plugins": [ 117 | "html", 118 | "react" 119 | ], 120 | ... 121 | } 122 | ``` 123 | 124 | Some plugins, like `eslint-plugin-react` requires additional settings. Check the 125 | guide from the plugin page and enabled them too. 126 | 127 | ```json 128 | { 129 | ... 130 | "parserOptions": { 131 | "ecmaFeatures": { 132 | "jsx": true // required by eslint-plugin-react 133 | }, 134 | "sourceType": "module" 135 | }, 136 | ... 137 | } 138 | ``` 139 | 140 | Now when you code inside VSCode, the ESLint extension will show the errors 141 | right away. 142 | 143 | ![VSCode Lint](images/vscode-setup/03-vscode-lint.png) 144 | 145 | #### Bonus Tip: Using Multiple Config 146 | 147 | Sometimes you may also need to have presets from other providers which `wordpress` 148 | doesn't use or interferes with right now. In this scenario, you can use the 149 | `"extends"` option inside `.eslintrc.js` or `package.json` file to extend over 150 | multiple configurations. 151 | 152 | For example, with the `eslint-plugin-react` plugin if we want to use the 153 | settings provided by the plugin and `wordpress` together, we will define it like 154 | 155 | ```json 156 | { 157 | ... 158 | "extends": [ 159 | "plugin:react/recommended", 160 | "wordpress" 161 | ] 162 | ... 163 | } 164 | ``` 165 | 166 | Having the `wordpress` config at the end of the array ensures that we always 167 | adhere to WordPress Coding Standards. 168 | 169 | ## 3: Autofix `js` files on save 170 | 171 | Sometimes when working with your personal projects, it is easier to automatically 172 | perform fixes when saving the file in VSCode. The ESLint extension provides an 173 | option to do that. 174 | 175 | **You should not have this enabled while editing WordPress Core Files. It is 176 | [not encouraged](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/#code-refactoring).** 177 | 178 | Open `User Settings` (⌘+, for mac, Ctrl+, for rest) 179 | and add the following configuration. 180 | 181 | ```json 182 | "eslint.autoFixOnSave": true 183 | ``` 184 | 185 | Now if you write bad code like this 186 | 187 | ```js 188 | const myArr = ['I', 'am', 'wrong']; 189 | for(const [index, item] of myArr.entries()) { 190 | console.log(index, item); 191 | } 192 | ``` 193 | 194 | After just saving the file, it will become this 195 | 196 | ```js 197 | const myArr = [ 'I', 'am', 'wrong' ]; 198 | for ( const [ index, item ] of myArr.entries() ) { 199 | console.log( index, item ); 200 | } 201 | ``` 202 | 203 | ### Bonus Tip: `editor.formatOnSave` 204 | If you have `"editor.formatOnSave": true` then you need to disable it for 205 | javascript language and enable `"eslint.autoFixOnSave"`. 206 | 207 | ```json 208 | { 209 | ... 210 | "editor.formatOnSave": true, 211 | "[javascript]": { 212 | "editor.formatOnSave": false 213 | }, 214 | "[javascriptreact]": { 215 | "editor.formatOnSave": false 216 | }, 217 | "eslint.autoFixOnSave": true, 218 | ... 219 | } 220 | ``` 221 | 222 | Now this will work as expected on `.js` and `.jsx` files. Do note that autofix 223 | does not yet work with `.html` files. 224 | 225 | ## 4: Bonus `.eslintrc.js` config file 226 | 227 | If you just want to grab a config file that just works right out of the box 228 | then you may use this. Make sure you have `eslint-plugin-html` and `eslint-plugin-react` 229 | as your `devDependencies` inside `package.json` file. 230 | 231 | ```js 232 | module.exports = { 233 | "env": { 234 | "browser": true, 235 | "es6": true 236 | }, 237 | "extends": [ 238 | "plugin:react/recommended", 239 | "wordpress" 240 | ], 241 | "parserOptions": { 242 | "ecmaFeatures": { 243 | "jsx": true, 244 | "experimentalObjectRestSpread": true 245 | }, 246 | "sourceType": "module" 247 | }, 248 | "plugins": [ 249 | "html", 250 | "react" 251 | ], 252 | "rules": { 253 | "indent": [ 254 | "error", 255 | "tab" 256 | ], 257 | "linebreak-style": [ 258 | "error", 259 | "unix" 260 | ], 261 | "quotes": [ 262 | "error", 263 | "single" 264 | ], 265 | "semi": [ 266 | "error", 267 | "always" 268 | ] 269 | } 270 | }; 271 | ``` 272 | 273 | To see the `package.json` and `.eslintrc.js` file yourself, check [this repository](https://github.com/swashata/eslint-wordpress-test). 274 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # eslint-config-wordpress documentation 2 | 3 | > Documentation for using ESLint with `wordpress` config. 4 | 5 | ## 1: Setup ESLint with your Project 6 | 7 | Guides on installing ESLint and configure to use `wordpress` Coding Standards. 8 | 9 | * [Local ESLint Setup with `wordpress` config](00-eslint-cli-setup.md). 10 | 11 | ## 2: Editor Integration 12 | 13 | Integrate ESLint directly within your favorite text editor. 14 | 15 | * [VSCode integration with ESLint Extension](01-vscode-setup.md). 16 | -------------------------------------------------------------------------------- /docs/images/eslint-cli-setup/01-npm-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/eslint-cli-setup/01-npm-version.png -------------------------------------------------------------------------------- /docs/images/eslint-cli-setup/02-npm-init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/eslint-cli-setup/02-npm-init.png -------------------------------------------------------------------------------- /docs/images/eslint-cli-setup/03-npm-i-eslint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/eslint-cli-setup/03-npm-i-eslint.png -------------------------------------------------------------------------------- /docs/images/eslint-cli-setup/04-eslint-init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/eslint-cli-setup/04-eslint-init.png -------------------------------------------------------------------------------- /docs/images/eslint-cli-setup/05-eslint-bad-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/eslint-cli-setup/05-eslint-bad-code.png -------------------------------------------------------------------------------- /docs/images/eslint-cli-setup/06-npm-run-script-eslint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/eslint-cli-setup/06-npm-run-script-eslint.png -------------------------------------------------------------------------------- /docs/images/vscode-setup/01-vscode-eslint-ext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/vscode-setup/01-vscode-eslint-ext.png -------------------------------------------------------------------------------- /docs/images/vscode-setup/02-eslint-plugins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/vscode-setup/02-eslint-plugins.png -------------------------------------------------------------------------------- /docs/images/vscode-setup/03-vscode-lint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress-Coding-Standards/eslint-config-wordpress/a2dbf89e1171b0fd4ef84c6a13ae3678bf6304de/docs/images/vscode-setup/03-vscode-lint.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | env: { 5 | browser: true, 6 | }, 7 | 8 | globals: { 9 | _: false, 10 | Backbone: false, 11 | jQuery: false, 12 | JSON: false, 13 | wp: false, 14 | }, 15 | 16 | rules: { 17 | // Possible Errors 18 | // Disallow assignment in conditional expressions 19 | 'no-cond-assign': ['error', 'except-parens'], 20 | // Disallow irregular whitespace outside of strings and comments 21 | 'no-irregular-whitespace': 'error', 22 | // Best Practices 23 | // Specify curly brace conventions for all control statements 24 | curly: ['error', 'all'], 25 | // Encourages use of dot notation whenever possible 26 | 'dot-notation': ['error', { 27 | allowKeywords: true, 28 | allowPattern: '^[a-z]+(_[a-z]+)+$', 29 | }], 30 | // Disallow use of multiline strings 31 | 'no-multi-str': 'error', 32 | // Disallow use of the with statement 33 | 'no-with': 'error', 34 | // Requires to declare all vars on top of their containing scope 35 | 'vars-on-top': 'error', 36 | // Require immediate function invocation to be wrapped in parentheses 37 | 'wrap-iife': 'error', 38 | // Require or disallow Yoda conditions 39 | yoda: ['error', 'always'], 40 | // Strict Mode 41 | // Variables 42 | // Stylistic Issues 43 | // Enforce spacing inside array brackets 44 | 'array-bracket-spacing': ['error', 'always'], 45 | // Enforce one true brace style 46 | 'brace-style': 'error', 47 | // Require camel case names 48 | camelcase: ['error', { 49 | properties: 'always', 50 | }], 51 | // Disallow or enforce trailing commas 52 | 'comma-dangle': ['error', 'never'], 53 | // Enforce spacing before and after comma 54 | 'comma-spacing': 'error', 55 | // Enforce one true comma style 56 | 'comma-style': ['error', 'last'], 57 | // Enforce newline at the end of file, with no multiple empty lines 58 | 'eol-last': 'error', 59 | // Enforces spacing between keys and values in object literal properties 60 | 'key-spacing': ['error', { 61 | beforeColon: false, 62 | afterColon: true, 63 | }], 64 | // Enforce spacing before and after keywords 65 | 'keyword-spacing': 'error', 66 | // Disallow mixed "LF" and "CRLF" as linebreaks 67 | 'linebreak-style': ['error', 'unix'], 68 | // Enforces empty lines around comments 69 | 'lines-around-comment': ['error', { 70 | beforeLineComment: true, 71 | }], 72 | // Disallow mixed spaces and tabs for indentation 73 | 'no-mixed-spaces-and-tabs': 'error', 74 | // Disallow multiple empty lines 75 | 'no-multiple-empty-lines': 'error', 76 | // Disallow trailing whitespace at the end of lines 77 | 'no-trailing-spaces': 'error', 78 | // Require or disallow an newline around variable declarations 79 | 'one-var-declaration-per-line': ['error', 'initializations'], 80 | // Enforce operators to be placed before or after line breaks 81 | 'operator-linebreak': ['error', 'after'], 82 | // Specify whether backticks, double or single quotes should be used 83 | quotes: ['error', 'single'], 84 | // Require or disallow use of semicolons instead of ASI 85 | semi: ['error', 'always'], 86 | // Require or disallow space before blocks 87 | 'space-before-blocks': ['error', 'always'], 88 | // Require or disallow space before function opening parenthesis 89 | 'space-before-function-paren': ['error', 'never'], 90 | // Require or disallow space before blocks 91 | 'space-in-parens': ['error', 'always', {exceptions: ['{}', '[]']}], 92 | // Require spaces around operators 93 | 'space-infix-ops': 'error', 94 | // Require or disallow spaces before/after unary operators (words on by default, nonwords) 95 | 'space-unary-ops': ['error', { 96 | overrides: {'!': true}, 97 | }], 98 | // Legacy 99 | }, 100 | }; 101 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-wordpress", 3 | "version": "2.0.0", 4 | "description": "ESLint shareable config for WordPress", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/WordPress-Coding-Standards/eslint-config-wordpress.git" 9 | }, 10 | "homepage": "https://github.com/WordPress-Coding-Standards/eslint-config-wordpress#readme", 11 | "author": { 12 | "name": "Stephen Edgar", 13 | "email": "stephen@netweb.com.au", 14 | "url": "https://netweb.com.au" 15 | }, 16 | "engines": { 17 | "node": ">=8.9.3" 18 | }, 19 | "main": "index.js", 20 | "files": [ 21 | "index.js" 22 | ], 23 | "scripts": { 24 | "commitmsg": "commitlint -e $GIT_PARAMS", 25 | "dry-release": "npmpub --dry --verbose", 26 | "lint": "eslint . --ignore-path .gitignore", 27 | "pretest": "npm run lint", 28 | "release": "npmpub --verbose", 29 | "test": "jest", 30 | "watch": "jest --watch" 31 | }, 32 | "keywords": [ 33 | "eslint", 34 | "eslintconfig", 35 | "eslint-config", 36 | "eslint-config-wordpress", 37 | "JavaScript", 38 | "jscs", 39 | "jshint", 40 | "lint", 41 | "linter", 42 | "linting", 43 | "wordpress" 44 | ], 45 | "devDependencies": { 46 | "@commitlint/cli": "^7.0.0", 47 | "@commitlint/config-conventional": "^7.0.1", 48 | "eslint": "~4.19.0", 49 | "eslint-plugin-wordpress": "git://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#552af1454d175e15f6d25aadc2ccde30a1922d4f", 50 | "husky": "~1.3.0", 51 | "is-plain-obj": "~2.0.0", 52 | "jest": "~22.4.2", 53 | "npmpub": "~4.1.0" 54 | }, 55 | "commitlint": { 56 | "extends": [ 57 | "@commitlint/config-conventional" 58 | ] 59 | }, 60 | "jest": { 61 | "roots": [ 62 | "__tests__" 63 | ], 64 | "testEnvironment": "node", 65 | "testMatch": [ 66 | "**/?(*.)(spec|test).js" 67 | ], 68 | "verbose": true 69 | } 70 | } 71 | --------------------------------------------------------------------------------