nrwl / precise-commits

:sparkles: Painlessly apply Prettier by only formatting lines you have modified anyway!
MIT License
471 stars 20 forks source link

Examples would be helpful #22

Open BryceHayden opened 6 years ago

BryceHayden commented 6 years ago

First let me just say I'm excited about using precise-commits, but I think that a couple of simple examples might be useful. For example:

I'm using prettier in my project, but it is used through eslint...since prettier doesn't check for some code rules that eslint will catch, check out their docs.

Because of this, I haven't be successful in getting precise-commits to work. I have husky installed and it is triggering precise-commits. Husky is setup to run precise-commits for a pre-push hook. Husky fires, and I see precise-commits checking for modified files, but it doesn't find any.

I know that I have prettier and eslint hooked up correctly, as when I change a file in my IDE(visual studio code) the eslint plugin catches and changes the file based on my settings. But not everyone has these settings on my team so I want to make sure the pre-push hook will trigger prettier before pushing changes up to our repo. If I alter my files in Vim, so they won't get automatically fixed by my IDE, then precise-commits doesn't cause prettier to fire. I think it has to do with the fact that I'm using it through Eslint.

Directory structure:

root

Here's the content of my files:

Root package.json

{
  "name": "react-redux-to-net-core-postgres",
  "version": "1.0.0",
  "description": "This package.json is purely for git hooks",
  "private": true,
  "scripts": {
    "client-test": "cd ./client && npm run test",
    "client-lint": "cd ./client && npm run lint",
    "client-lint:fix": "cd ./client && npm run lint:fix",
    "pre-push": "cd ./client && npm run precise-commits"
  },
  "devDependencies": {
    "husky": "1.0.0-rc.13"
  },
  "husky": {
    "hooks": {
      "pre-push": "npm run pre-push",
      "...": "..."
    }
  }
}

Client package.json

"name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "precise-commits": "precise-commits"
  },
  "dependencies": {
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "precise-commits": "^1.0.2",
    "promise": "8.0.1",
    "raf": "3.4.0",
    "react": "^16.4.1",
    "react-dev-utils": "^5.0.1",
    "react-dom": "^16.4.1",
    "resolve": "1.6.0",
    "style-loader": "0.19.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "devDependencies": {
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-prettier": "^2.6.2",
    "prettier": "^1.13.7"
  }
}

Client .eslintrc

{
  "extends": [
    "plugin:prettier/recommended",
    "prettier/react"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "parser": "babel-eslint",
  "rules": {
    "jest/no-identical-title": "error",
    "jest/no-focused-tests": "error",
    "no-unused-vars": [2, {
      "vars": "all",
      "args": "none",
      "ignoreRestSiblings": true
    }],
    "no-unused-expressions": "off",
    "react/prop-types": [2, {
      "skipUndeclared": true
    }],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 120
      }
    ]
  }
}

Command Line output

husky > pre-push (node v7.8.0)

> react-redux-to-net-core-postgres@1.0.0 pre-push /Users/bryce/Documents/stacks/react-redux-to-net-core-postgres
> cd ./client && npm run precise-commits

> client@0.1.0 precise-commits /Users/bryce/Documents/stacks/react-redux-to-net-core-postgres/client
> precise-commits

ℹ  precise-commits: No matching modified files detected.

  --> If you feel that one or more files should be showing up here, be sure to first check what file extensions prettier supports, and whether or not you have included those files in a .prettierignore file

Is it possible to use precise-commits with eslint that's using prettier? Thanks.

BryceHayden commented 6 years ago

Actually maybe it has to do with the fact that I'm using a pre-push hook, instead of a pre-commit hook. I thought it wouldn't matter since husky is the one triggering things, but it looks like it does. So is there anyway to use precise-commits with a pre-push hook from husky? Also when it goes through precise-commits the outcome is different than when I go through the IDE and the eslint plugin....I think it has to do with the fact that precise-commits isn't using eslint, and I don't have any config files like .prettierrc Thoughts?

sygint commented 5 years ago

It seems like the benefits of precise-commits is the staged changes are all that happens, on a pre-push hook you don't have any staged files, so I'd guess it doesn't know what to check. As for eslint + prettier, I'd checkout the eslint config for prettier: eslint-config-prettier (there is also one for stylelint if you use that: stylelint-config-prettier). These disable the rules which prettier will automatically handle, which makes life a bit easier for me.

As for how to get githooks other than precise-commits to work precise-commits and husky, I too am a bit lost. It seems like it can only do prettier due to its interface, which is a major disappointment, I hope the API can be expanded or even better, that I'm wrong.