eslint/docs/src/rules/camelcase.md

   1 ---
   2 title: camelcase
   3 layout: doc
   4 rule_type: suggestion
   5 ---
   6
   7
   8 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!
   9
  10 ## Rule Details
  11
  12 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.
  13
  14 ## Options
  15
  16 This rule has an object option:
  17
  18 * `"properties": "always"` (default) enforces camelcase style for property names
  19 * `"properties": "never"` does not check property names
  20 * `"ignoreDestructuring": false` (default) enforces camelcase style for destructured identifiers
  21 * `"ignoreDestructuring": true` does not check destructured identifiers (but still checks any use of those identifiers later in the code)
  22 * `"ignoreImports": false` (default) enforces camelcase style for ES2015 imports
  23 * `"ignoreImports": true` does not check ES2015 imports (but still checks any use of the imports later in the code except function arguments)
  24 * `"ignoreGlobals": false` (default) enforces camelcase style for global variables
  25 * `"ignoreGlobals": true` does not enforce camelcase style for global variables
  26 * `allow` (`string[]`) list of properties to accept. Accept regex.
  27
  28 ### properties: "always"
  29
  30 Examples of **incorrect** code for this rule with the default `{ "properties": "always" }` option:
  31
  32 :::incorrect
  33
  34 ```js
  35 /*eslint camelcase: "error"*/
  36
  37 import { no_camelcased } from "external-module"
  38
  39 var my_favorite_color = "#112C85";
  40
  41 function do_something() {
  42     // ...
  43 }
  44
  45 obj.do_something = function() {
  46     // ...
  47 };
  48
  49 function foo({ no_camelcased }) {
  50     // ...
  51 };
  52
  53 function foo({ isCamelcased: no_camelcased }) {
  54     // ...
  55 }
  56
  57 function foo({ no_camelcased = 'default value' }) {
  58     // ...
  59 };
  60
  61 var obj = {
  62     my_pref: 1
  63 };
  64
  65 var { category_id = 1 } = query;
  66
  67 var { foo: no_camelcased } = bar;
  68
  69 var { foo: bar_baz = 1 } = quz;
  70 ```
  71
  72 :::
  73
  74 Examples of **correct** code for this rule with the default `{ "properties": "always" }` option:
  75
  76 :::correct
  77
  78 ```js
  79 /*eslint camelcase: "error"*/
  80
  81 import { no_camelcased as camelCased } from "external-module";
  82
  83 var myFavoriteColor   = "#112C85";
  84 var _myFavoriteColor  = "#112C85";
  85 var myFavoriteColor_  = "#112C85";
  86 var MY_FAVORITE_COLOR = "#112C85";
  87 var foo = bar.baz_boom;
  88 var foo = { qux: bar.baz_boom };
  89
  90 obj.do_something();
  91 do_something();
  92 new do_something();
  93
  94 var { category_id: category } = query;
  95
  96 function foo({ isCamelCased }) {
  97     // ...
  98 };
  99
 100 function foo({ isCamelCased: isAlsoCamelCased }) {
 101     // ...
 102 }
 103
 104 function foo({ isCamelCased = 'default value' }) {
 105     // ...
 106 };
 107
 108 var { categoryId = 1 } = query;
 109
 110 var { foo: isCamelCased } = bar;
 111
 112 var { foo: isCamelCased = 1 } = quz;
 113
 114 ```
 115
 116 :::
 117
 118 ### properties: "never"
 119
 120 Examples of **correct** code for this rule with the `{ "properties": "never" }` option:
 121
 122 :::correct
 123
 124 ```js
 125 /*eslint camelcase: ["error", {properties: "never"}]*/
 126
 127 var obj = {
 128     my_pref: 1
 129 };
 130 ```
 131
 132 :::
 133
 134 ### ignoreDestructuring: false
 135
 136 Examples of **incorrect** code for this rule with the default `{ "ignoreDestructuring": false }` option:
 137
 138 :::incorrect
 139
 140 ```js
 141 /*eslint camelcase: "error"*/
 142
 143 var { category_id } = query;
 144
 145 var { category_id = 1 } = query;
 146
 147 var { category_id: category_id } = query;
 148
 149 var { category_id: category_alias } = query;
 150
 151 var { category_id: categoryId, ...other_props } = query;
 152 ```
 153
 154 :::
 155
 156 ### ignoreDestructuring: true
 157
 158 Examples of **incorrect** code for this rule with the `{ "ignoreDestructuring": true }` option:
 159
 160 :::incorrect
 161
 162 ```js
 163 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 164
 165 var { category_id: category_alias } = query;
 166
 167 var { category_id, ...other_props } = query;
 168 ```
 169
 170 :::
 171
 172 Examples of **correct** code for this rule with the `{ "ignoreDestructuring": true }` option:
 173
 174 :::correct
 175
 176 ```js
 177 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 178
 179 var { category_id } = query;
 180
 181 var { category_id = 1 } = query;
 182
 183 var { category_id: category_id } = query;
 184 ```
 185
 186 :::
 187
 188 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.
 189
 190 Examples of additional **incorrect** code for this rule with the `{ "ignoreDestructuring": true }` option:
 191
 192 :::incorrect
 193
 194 ```js
 195 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 196
 197 var { some_property } = obj; // allowed by {ignoreDestructuring: true}
 198 var foo = some_property + 1; // error, ignoreDestructuring does not apply to this statement
 199 ```
 200
 201 :::
 202
 203 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.
 204
 205 Examples of additional **correct** code for this rule with the `{ "ignoreDestructuring": true }` option:
 206
 207 :::correct
 208
 209 ```js
 210 /*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
 211
 212 var { some_property, ...rest } = obj;
 213 // do something with 'rest', nothing with 'some_property'
 214 ```
 215
 216 :::
 217
 218 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.
 219
 220 Examples of additional **correct** code for this rule with the `{ "properties": "never", "ignoreDestructuring": true }` options:
 221
 222 :::correct
 223
 224 ```js
 225 /*eslint camelcase: ["error", {"properties": "never", ignoreDestructuring: true}]*/
 226
 227 var { some_property } = obj;
 228 doSomething({ some_property });
 229 ```
 230
 231 :::
 232
 233 ### ignoreImports: false
 234
 235 Examples of **incorrect** code for this rule with the default `{ "ignoreImports": false }` option:
 236
 237 :::incorrect
 238
 239 ```js
 240 /*eslint camelcase: "error"*/
 241
 242 import { snake_cased } from 'mod';
 243 ```
 244
 245 :::
 246
 247 ### ignoreImports: true
 248
 249 Examples of **incorrect** code for this rule with the `{ "ignoreImports": true }` option:
 250
 251 :::incorrect
 252
 253 ```js
 254 /*eslint camelcase: ["error", {ignoreImports: true}]*/
 255
 256 import default_import from 'mod';
 257
 258 import * as namespaced_import from 'mod';
 259 ```
 260
 261 :::
 262
 263 Examples of **correct** code for this rule with the `{ "ignoreImports": true }` option:
 264
 265 :::correct
 266
 267 ```js
 268 /*eslint camelcase: ["error", {ignoreImports: true}]*/
 269
 270 import { snake_cased } from 'mod';
 271 ```
 272
 273 :::
 274
 275 ### ignoreGlobals: false
 276
 277 Examples of **incorrect** code for this rule with the default `{ "ignoreGlobals": false }` option:
 278
 279 :::incorrect
 280
 281 ```js
 282 /*eslint camelcase: ["error", {ignoreGlobals: false}]*/
 283 /* global no_camelcased */
 284
 285 const foo = no_camelcased;
 286 ```
 287
 288 :::
 289
 290 ### ignoreGlobals: true
 291
 292 Examples of **correct** code for this rule with the `{ "ignoreGlobals": true }` option:
 293
 294 :::correct
 295
 296 ```js
 297 /*eslint camelcase: ["error", {ignoreGlobals: true}]*/
 298 /* global no_camelcased */
 299
 300 const foo = no_camelcased;
 301 ```
 302
 303 :::
 304
 305 ### allow
 306
 307 Examples of **correct** code for this rule with the `allow` option:
 308
 309 :::correct
 310
 311 ```js
 312 /*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
 313
 314 function UNSAFE_componentWillMount() {
 315     // ...
 316 }
 317 ```
 318
 319 :::
 320
 321 ::: correct
 322
 323 ```js
 324 /*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
 325
 326 function UNSAFE_componentWillMount() {
 327     // ...
 328 }
 329
 330 function UNSAFE_componentWillMount() {
 331     // ...
 332 }
 333 ```
 334
 335 :::
 336
 337 ## When Not To Use It
 338
 339 If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off.