Fix: if no trailing comma, not to leave trailing comma after fixed of order-in-components (#569)

* Fix: if no trailing comma, not to leave trailing comma after fixed of `order-in-components`

* use array fixer

Author: ota-meshi

lib/rules/order-in-components.js

@@ -193,22 +193,22 @@ module.exports = {
               if (hasSideEffectsPossibility) {
                 return undefined
               }
-              const comma = sourceCode.getTokenAfter(propertyNode)
-              const hasAfterComma = isComma(comma)
+              const afterComma = sourceCode.getTokenAfter(propertyNode)
+              const hasAfterComma = isComma(afterComma)
 
-              const codeStart = sourceCode.getTokenBefore(propertyNode).range[1] // to include comments
-              const codeEnd = hasAfterComma ? comma.range[1] : propertyNode.range[1]
+              const beforeComma = sourceCode.getTokenBefore(propertyNode)
+              const codeStart = beforeComma.range[1] // to include comments
+              const codeEnd = hasAfterComma ? afterComma.range[1] : propertyNode.range[1]
 
               const propertyCode = sourceCode.text.slice(codeStart, codeEnd) + (hasAfterComma ? '' : ',')
               const insertTarget = sourceCode.getTokenBefore(firstUnorderedPropertyNode)
-              // If we can upgrade requirements to `eslint@>4.1.0`, this code can be replaced by:
-              // return [
-              //   fixer.removeRange([codeStart, codeEnd]),
-              //   fixer.insertTextAfter(insertTarget, propertyCode)
-              // ]
-              const insertStart = insertTarget.range[1]
-              const newCode = propertyCode + sourceCode.text.slice(insertStart, codeStart)
-              return fixer.replaceTextRange([insertStart, codeEnd], newCode)
+
+              const removeStart = hasAfterComma ? codeStart : beforeComma.range[0]
+
+              return [
+                fixer.removeRange([removeStart, codeEnd]),
+                fixer.insertTextAfter(insertTarget, propertyCode)
+              ]
             }
           })
         }

tests/lib/autofix.js

@@ -29,6 +29,64 @@ describe('Complex autofix test cases', () => {
     linter.defineRule(ruleId, rules[key])
   }
 
+  // https://github.com/vuejs/eslint-plugin-vue/issues/566
+  describe('Autofix of `vue/order-in-components` and `comma-dangle` should not conflict.', () => {
+    const config = Object.assign({}, baseConfig, { 'rules': {
+      'vue/order-in-components': ['error'],
+      'comma-dangle': ['error', 'always']
+    }})
+
+    it('Even if set comma-dangle:always, the output should be as expected.', () => {
+      const code = `
+      <script>
+        export default {
+          data() {
+          },
+          name: 'burger'
+        };
+      </script>`
+      const output = `
+      <script>
+        export default {
+          name: 'burger',
+          data() {
+          },
+        };
+      </script>`
+      assert.equal(
+        linter.verifyAndFix(code, config, 'test.vue').output,
+        output
+      )
+    })
+
+    it('Even if include comments, the output should be as expected.', () => {
+      const code = `
+      <script>
+        export default {
+          /**data*/
+          data() {
+          }/*after data*/,
+          /**name*/
+          name: 'burger'/*after name*/
+        };
+      </script>`
+      const output = `
+      <script>
+        export default {
+          /**name*/
+          name: 'burger',
+          /**data*/
+          data() {
+          },/*after data*//*after name*/
+        };
+      </script>`
+      assert.equal(
+        linter.verifyAndFix(code, config, 'test.vue').output,
+        output
+      )
+    })
+  })
+
   // https://github.com/vuejs/eslint-plugin-vue/issues/554
   describe('Autofix of `html-self-closing` and `component-name-in-template-casing` should not conflict.', () => {
     const kebabConfig = Object.assign({}, baseConfig, { 'rules': {
@@ -39,6 +97,7 @@ describe('Complex autofix test cases', () => {
       }],
       'vue/component-name-in-template-casing': ['error', 'kebab-case']
     }})
+
     const pascalConfig = Object.assign({}, baseConfig, { 'rules': {
       'vue/html-self-closing': ['error', {
         'html': {
@@ -47,6 +106,7 @@ describe('Complex autofix test cases', () => {
       }],
       'vue/component-name-in-template-casing': ['error']
     }})
+
     it('Even if set kebab-case, the output should be as expected.', () => {
       const code = `
       <template>
@@ -62,6 +122,7 @@ describe('Complex autofix test cases', () => {
         output
       )
     })
+
     it('Even if set PascalCase, the output should be as expected.', () => {
       const code = `
       <template>
@@ -77,6 +138,7 @@ describe('Complex autofix test cases', () => {
         output
       )
     })
+
     it('Even if element have an attributes, the output should be as expected.', () => {
       const code = `
       <template>

tests/lib/rules/order-in-components.js

@@ -374,7 +374,7 @@ ruleTester.run('order-in-components', rule, {
           data() {
           },
           test: 'ok',
-          name: 'burger',
+          name: 'burger'
         };
       `,
       options: [{ order: ['data', 'test', 'name'] }],
@@ -401,7 +401,33 @@ ruleTester.run('order-in-components', rule, {
           name: 'burger',
           /** data provider */
           data() {
-          },
+          }
+        };
+      `,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 4.',
+        line: 7
+      }]
+    },
+    {
+      filename: 'example.vue',
+      code: `
+        export default {
+          /** data provider */
+          data() {
+          }/*test*/,
+          /** name of vue component */
+          name: 'burger'
+        };
+      `,
+      parserOptions,
+      output: `
+        export default {
+          /** name of vue component */
+          name: 'burger',
+          /** data provider */
+          data() {
+          }/*test*/
         };
       `,
       errors: [{
@@ -413,7 +439,7 @@ ruleTester.run('order-in-components', rule, {
       filename: 'example.vue',
       code: `export default {data(){},name:'burger'};`,
       parserOptions,
-      output: `export default {name:'burger',data(){},};`,
+      output: `export default {name:'burger',data(){}};`,
       errors: [{
         message: 'The "name" property should be above the "data" property on line 1.',
         line: 1