Prettier-vscode: Unknown reason for "range null" with eslintIntegration

[orblazer]

Hello,
I have an error sometime on some typescript files.
Note: On the editor and with eslint command i don't have lint error

• Extension version: 1.9.0
• Project packages versions :
  
  
  
  • @typescript-eslint/eslint-plugin: 1.9.0
  
  
  • @typescript-eslint/parser
  
  
  • eslint: 5.16.0
  
  
  • eslint-config-standard: 12.0.0
  
  
  • eslint-plugin-import: 2.17.3
  
  
  • eslint-plugin-node: 9.1.0
  
  
  • eslint-plugin-promise: 4.1.1
  
  
  • eslint-plugin-standard: 4.0.0
  
  

The error :

Cannot read property 'range' of null
Occurred while linting /home2/orblazer/dev/nodejs/gestion/api/src/graphql/lib/Auth.ts:1

My file :

import { AuthenticationError, ForbiddenError } from 'apollo-server-core'
import { UserJWT, UserRole } from '@/database/User'

/**
 * Check if user is logged
 *
 * @param user the user info
 * @param throwErr the error is throw
 */
function isAuth (user: UserJWT | false, throwErr: boolean = false): boolean {
  if (user === false && throwErr) {
    throw new AuthenticationError('Access denied! You are not logged !')
  }

  return user !== false
}

/**
 * Check if user has role
 *
 * @param user the user data
 * @param roles the roles
 * @param throwErr thr error is throw
 */
function hasRole (
  user: UserJWT | false,
  roles: UserRole[] | UserRole = UserRole.CLIENT,
  throwErr: boolean = false
): boolean {
  if (!isAuth(user, throwErr)) {
    return false
  }
  user = user as UserJWT // Fix type checking

  if (
    (typeof user.role === 'string' && user.role !== roles) ||
    !roles.includes(user.role)
  ) {
    if (throwErr) {
      throw new ForbiddenError(
        "Access denied! You don't have permission for this action!"
      )
    }

    return false
  }

  return true
}

function hasKey (
  key: string,
  tryKey: string | true = null,
  throwErr: boolean = false
): boolean {
  if ((tryKey === true && key === null) || key !== tryKey) {
    if (throwErr) {
      throw new ForbiddenError(
        "Access denied! You don't have permission for this action! (The key is incorrect)"
      )
    }

    return false
  }

  return true
}

export default {
  isAuth,
  hasRole,
  hasKey
}

My eslintrc :

module.exports = {
  root: true,
  env: {
    node: true
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json'
  },
  extends: [
    'standard',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/recommended',
    'plugin:import/typescript'
  ],
  plugins: ['@typescript-eslint', 'standard'],
  rules: {
    '@typescript-eslint/indent': [
      'error',
      2,
      {
        SwitchCase: 1,
        VariableDeclarator: 1,
        outerIIFEBody: 1,
        MemberExpression: 1,
        FunctionDeclaration: { parameters: 1, body: 1 },
        FunctionExpression: { parameters: 1, body: 1 },
        CallExpression: { arguments: 1 },
        ArrayExpression: 1,
        ObjectExpression: 1,
        ImportDeclaration: 1,
        flatTernaryExpressions: false,
        ignoreComments: false
      }
    ],

    // Enforce import order
    'import/order': 'error',

    // Imports should come first
    'import/first': 'error',

    // Other import rules
    'import/no-mutable-exports': 'error',

    // Allow unresolved imports
    'import/no-unresolved': 'off',

    // Allow paren-less arrow functions only when there's no braces
    'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }],

    // Allow async-await
    'generator-star-spacing': 'off',

    // Allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-console': [
      process.env.NODE_ENV === 'production' ? 'error' : 'warn',
      { allow: ['warn', 'error'] }
    ],

    // Prefer const over let
    'prefer-const': [
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false
      }
    ],

    // No single if in an "else" block
    'no-lonely-if': 'error',

    // Force curly braces for control flow,
    // including if blocks with a single statement
    curly: ['error', 'all'],

    // No async function without await
    'require-await': 'error',

    // Force dot notation when possible
    'dot-notation': 'error',

    'no-var': 'error',

    // Force object shorthand where possible
    'object-shorthand': 'error',

    // No useless destructuring/importing/exporting renames
    'no-useless-rename': 'error'
  }
}

Thanks.

[ygerg]

Happens with JS files, too, if there are backtick string literals in the file.

5/31/2019, 12:32:23 PM:
-----------------------
Cannot read property 'range' of null

[tim0991]

https://github.com/prettier/prettier-eslint/issues/213
Cannot read property 'range' of null may be a bug of prettier-vscode ?

[orblazer]

Thanks @tim0991 , with prettier-eslint@^9.0.0 its work but now i have wrong format (its probably other problem).

This is formatted to (missing before parenthesis) :

import { AuthenticationError, ForbiddenError } from 'apollo-server-core'
import { UserJWT, UserRole } from '@/database/admin/User'

/**
 * Check if user is logged
 *
 * @param user the user info
 * @param throwErr the error is throw
 */
function isAuth(user: UserJWT | false, throwErr: boolean = false): boolean {
  if (user === false && throwErr) {
    throw new AuthenticationError('Access denied! You are not logged !')
  }

  return user !== false
}

/**
 * Check if user has role
 *
 * @param user the user data
 * @param roles the roles
 * @param throwErr thr error is throw
 */
function hasRole(
  user: UserJWT | false,
  roles: UserRole[] | UserRole = UserRole.CLIENT,
  throwErr: boolean = false
): boolean {
  if (!isAuth(user, throwErr)) {
    return false
  }
  user = user as UserJWT // Fix type checking

  if (
    (typeof user.role === 'string' && user.role !== roles) ||
    !roles.includes(user.role)
  ) {
    if (throwErr) {
      throw new ForbiddenError(
        "Access denied! You don't have permission for this action!"
      )
    }

    return false
  }

  return true
}

function hasKey(
  key: string,
  tryKey: string | true = null,
  throwErr: boolean = false
): boolean {
  if ((tryKey === true && key === null) || key !== tryKey) {
    if (throwErr) {
      throw new ForbiddenError(
        "Access denied! You don't have permission for this action! (The key is incorrect)"
      )
    }

    return false
  }

  return true
}

export default {
  isAuth,
  hasRole,
  hasKey
}

[zavarka]

Prettier breaks when "as" cast is present:

user = user as UserJWT // Fix type checking

[WaldoJeffers]

This issue is linked to prettier-eslint (see more details https://github.com/eslint/eslint/pull/11858#issuecomment-504022016)

It can be very easily fixed by upgrading to prettier-eslint v9. Would it be possible to release a new version of prettier-vscode with the newest version?

It's incredibly frustrating if you are using TypeScript with this extension :/

The issue is located here, where prettier-eslint relies on a deprecated module typescript-eslint-parser

The PR to fix the bug is here https://github.com/prettier/prettier-vscode/pull/861

[ntotten]

Next release will have ESLint 9.0.0.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.