eslint/docs/rules/camelcase.md

   1 # Require CamelCase (camelcase)
   2
   3 When it comes to naming variables, style guides generally fall into one of two camps: camelcase (`variableName`) and underscores (`variable_name`). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
   4
   5 ## Rule Details
   6
   7 This rule looks for any underscores (`_`) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 `import` statements, this rule only targets the name of the variable that will be imported into the local module scope.
   8
   9 ## Options
  10
  11 This rule has an object option:
  12
  13 * `"properties": "always"` (default) enforces camelcase style for property names
  14 * `"properties": "never"` does not check property names
  15 * `"ignoreDestructuring": false` (default) enforces camelcase style for destructured identifiers
  16 * `"ignoreDestructuring": true` does not check destructured identifiers (but still checks any use of those identifiers later in the code)
  17 * `"ignoreImports": false` (default) enforces camelcase style for ES2015 imports
  18 * `"ignoreImports": true` does not check ES2015 imports (but still checks any use of the imports later in the code except function arguments)
  19 * `"ignoreGlobals": false` (default) enforces camelcase style for global variables
  20 * `"ignoreGlobals": true` does not enforce camelcase style for global variables
  21 * `allow` (`string[]`) list of properties to accept. Accept regex.
  22
  23 ### properties: "always"
  24
  25 Examples of **incorrect** code for this rule with the default `{ "properties": "always" }` option:
  26
  27 ```js
  28 /*eslint camelcase: "error"*/
  29
  30 import { no_camelcased } from "external-module"
  31
  32 var my_favorite_color = "#112C85";
  33
  34 function do_something() {
  35     // ...
  36 }
  37
  38 obj.do_something = function() {
  39     // ...
  40 };
  41
  42 function foo({ no_camelcased }) {
  43     // ...
  44 };
  45
  46 function foo({ isCamelcased: no_camelcased }) {
  47     // ...
  48 }
  49
  50 function foo({ no_camelcased = 'default value' }) {
  51     // ...
  52 };
  53
  54 var obj = {
  55     my_pref: 1
  56 };
  57
  58 var { category_id = 1 } = query;
  59
  60 var { foo: no_camelcased } = bar;
  61
  62 var { foo: bar_baz = 1 } = quz;
  63 ```
  64
  65 Examples of **correct** code for this rule with the default `{ "properties": "always" }` option:
  66
  67 ```js
  68 /*eslint camelcase: "error"*/
  69
  70 import { no_camelcased as camelCased } from "external-module";
  71
  72 var myFavoriteColor   = "#112C85";
  73 var _myFavoriteColor  = "#112C85";
  74 var myFavoriteColor_  = "#112C85";
  75 var MY_FAVORITE_COLOR = "#112C85";
  76 var foo = bar.baz_boom;
  77 var foo = { qux: bar.baz_boom };
  78
  79 obj.do_something();
  80 do_something();
  81 new do_something();
  82
  83 var { category_id: category } = query;
  84
  85 function foo({ isCamelCased }) {
  86     // ...
  87 };
  88
  89 function foo({ isCamelCased: isAlsoCamelCased }) {
  90     // ...
  91 }
  92
  93 function foo({ isCamelCased = 'default value' }) {
  94     // ...
  95 };
  96
  97 var { categoryId = 1 } = query;
  98
  99 var { foo: isCamelCased } = bar;
 100
 101 var { foo: isCamelCased = 1 } = quz;
 102
 103 ```
 104
 105 ### properties: "never"
 106
 107 Examples of **correct** code for this rule with the `{ "properties": "never" }` option:
 108
 109 ```js
 110 /*eslint camelcase: ["error", {properties: "never"}]*/
 111
 112 var obj = {
 113     my_pref: 1
 114 };
 115 ```
 116
 117 ### ignoreDestructuring: false
 118
 119 Examples of **incorrect** code for this rule with the default `{ "ignoreDestructuring": false }` option:
 120
 121 ```js
 122 /*eslint camelcase: "error"*/
 123
 124 var { category_id } = query;
 125
 126 var { category_id = 1 } = query;
 127
 128 var { category_id: category_id } = query;
 129
 130 var { category_id: category_alias } = query;
 131
 132 var { category_id: categoryId, ...other_props } = query;
 133 ```
 134
 135 ### ignoreDestructuring: true
 136
 137 Examples of **incorrect** code for this rule with the `{ "ignoreDestructuring": true }` option:
 138
 139 ```js
 140 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 141
 142 var { category_id: category_alias } = query;
 143
 144 var { category_id, ...other_props } = query;
 145 ```
 146
 147 Examples of **correct** code for this rule with the `{ "ignoreDestructuring": true }` option:
 148
 149 ```js
 150 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 151
 152 var { category_id } = query;
 153
 154 var { category_id = 1 } = query;
 155
 156 var { category_id: category_id } = query;
 157 ```
 158
 159 Please note that this option applies only to identifiers inside destructuring patterns. It doesn't additionally allow any particular use of the created variables later in the code apart from the use that is already allowed by default or by other options.
 160
 161 Examples of additional **incorrect** code for this rule with the `{ "ignoreDestructuring": true }` option:
 162
 163 ```js
 164 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 165
 166 var { some_property } = obj; // allowed by {ignoreDestructuring: true}
 167 var foo = some_property + 1; // error, ignoreDestructuring does not apply to this statement
 168 ```
 169
 170 A common use case for this option is to avoid useless renaming when the identifier is not intended to be used later in the code.
 171
 172 Examples of additional **correct** code for this rule with the `{ "ignoreDestructuring": true }` option:
 173
 174 ```js
 175 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 176
 177 var { some_property, ...rest } = obj;
 178 // do something with 'rest', nothing with 'some_property'
 179 ```
 180
 181 Another common use case for this option is in combination with `{ "properties": "never" }`, when the identifier is intended to be used only as a property shorthand.
 182
 183 Examples of additional **correct** code for this rule with the `{ "properties": "never", "ignoreDestructuring": true }` options:
 184
 185 ```js
 186 /*eslint camelcase: ["error", {"properties": "never", ignoreDestructuring: true}]*/
 187
 188 var { some_property } = obj;
 189 doSomething({ some_property });
 190 ```
 191
 192 ### ignoreImports: false
 193
 194 Examples of **incorrect** code for this rule with the default `{ "ignoreImports": false }` option:
 195
 196 ```js
 197 /*eslint camelcase: "error"*/
 198
 199 import { snake_cased } from 'mod';
 200 ```
 201
 202 ### ignoreImports: true
 203
 204 Examples of **incorrect** code for this rule with the `{ "ignoreImports": true }` option:
 205
 206 ```js
 207 /*eslint camelcase: ["error", {ignoreImports: true}]*/
 208
 209 import default_import from 'mod';
 210
 211 import * as namespaced_import from 'mod';
 212 ```
 213
 214 Examples of **correct** code for this rule with the `{ "ignoreImports": true }` option:
 215
 216 ```js
 217 /*eslint camelcase: ["error", {ignoreImports: true}]*/
 218
 219 import { snake_cased } from 'mod';
 220 ```
 221
 222 ### ignoreGlobals: false
 223
 224 Examples of **incorrect** code for this rule with the default `{ "ignoreGlobals": false }` option:
 225
 226 ```js
 227 /*eslint camelcase: ["error", {ignoreGlobals: false}]*/
 228 /* global no_camelcased */
 229
 230 const foo = no_camelcased;
 231 ```
 232
 233 ### ignoreGlobals: true
 234
 235 Examples of **correct** code for this rule with the `{ "ignoreGlobals": true }` option:
 236
 237 ```js
 238 /*eslint camelcase: ["error", {ignoreGlobals: true}]*/
 239 /* global no_camelcased */
 240
 241 const foo = no_camelcased;
 242 ```
 243
 244 ## allow
 245
 246 Examples of **correct** code for this rule with the `allow` option:
 247
 248 ```js
 249 /*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
 250
 251 function UNSAFE_componentWillMount() {
 252     // ...
 253 }
 254 ```
 255
 256 ```js
 257 /*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
 258
 259 function UNSAFE_componentWillMount() {
 260     // ...
 261 }
 262
 263 function UNSAFE_componentWillMount() {
 264     // ...
 265 }
 266 ```
 267
 268 ## When Not To Use It
 269
 270 If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off.