【已解决】在老的vue项目里,prettier + lint-staged无法生效

Question

业务背景

在一个老的项目里面集成prettier,为了避免格式化所有代码,所以使用官方推荐的lint-staged

我的步骤

1. npm install --save-dev prettier
2. 粘贴prettier.js配置文件到根目录
3. npx nrm lint-staged

完成上述3个步骤后,package.json里面根本没有自动新增husky,lint-staged依赖,以及precommit钩子

所以我就手动安装依赖和添加相关huksy及lint-staged配置.但是提交新的commit后依然无法格式化

我的问题

要咋弄呢,在老的vue项目里面集成这个

相关文件

prettier.js

/** @format */

module.exports = {
    printWidth: 120,
    tabWidth: 4,
    useTabs: false,
    semi: true,
    singleQuote: true,
    quoteProps: "as-needed",
    jsxSingleQuote: true,
    trailingComma: "es5",
    bracketSpacing: true,
    jsxBracketSameLine: false,
    arrowParens: "avoid",
    rangeStart: 0,
    rangeEnd: Infinity,
    requirePragma: false,
    insertPragma: true,
    proseWrap: "preserve",
    htmlWhitespaceSensitivity: "css",
    vueIndentScriptAndStyle: false,
    endOfLine: "lf",
};

package.json

{
    "name": "jxg-admin",
    "version": "1.3.2",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --mode dev",
        "build": "vue-cli-service build --mode pro",
        "build:chenduo": "vue-cli-service build --mode chenduo --dest chenduo",
        "test": "vue-cli-service build --mode test --dest dist",
        "inttest": "vue-cli-service build --mode inttest --dest dist",
        "serve:admindev": "vue-cli-service serve --mode admindev",
        "serve:supplierdev": "vue-cli-service serve --mode supplierdev",
        "build:admintest": "vue-cli-service build --mode admintest --dest admintest",
        "build:admin": "vue-cli-service build --mode admin --dest admin",
        "build:suppliertest": "vue-cli-service build --mode suppliertest --dest suppliertest",
        "build:supplier": "vue-cli-service build --mode supplier --dest supplier",
        "lint": "vue-cli-service lint",
        "analyz": "npm_config_report=true npm run build",
        "test:unit": "vue-cli-service test:unit",
        "test:e2e": "vue-cli-service test:e2e"
    },
    "dependencies": {
        "avue-plugin-ueditor": "^0.0.4",
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "classlist-polyfill": "^1.2.0",
        "crypto-js": "^3.1.9-1",
        "echarts": "^4.6.0",
        "element-ui": "^2.8.2",
        "js-base64": "^2.5.1",
        "js-cookie": "^2.2.0",
        "mockjs": "^1.0.1-beta3",
        "nprogress": "^0.2.0",
        "script-loader": "^0.7.2",
        "vue": "^2.5.16",
        "vue-axios": "^2.1.2",
        "vue-drag-resize": "^1.3.2",
        "vue-i18n": "^8.7.0",
        "vue-router": "^3.0.1",
        "vuedraggable": "^2.23.2",
        "vuex": "^3.0.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.1.1",
        "@vue/cli-plugin-eslint": "^3.1.5",
        "@vue/cli-service": "^3.1.4",
        "babel-plugin-component": "^1.1.1",
        "chai": "^4.1.2",
        "cross-env": "^7.0.2",
        "husky": "^4.2.5",
        "lint-staged": "^10.2.11",
        "node-sass": "^4.9.0",
        "prettier": "^2.0.5",
        "sass-loader": "^7.0.1",
        "vue-template-compiler": "^2.5.17",
        "webpack-bundle-analyzer": "^3.0.3"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,css,md,ts,vue,scss,json}": "prettier --write"
    }
}

Answer 1

同样的步骤.昨天(2020-08-10)试就可以了

自己sb了

这个只针对修改过的文件进行格式化........

之前操作的时候,老是观察一个未改动的文件,会自动格式化才怪了

Answer 2

我同样试过修改的文件，也是不能自动格式化，这个有发现最终的原因吗？