Настройки VSCode, EsLint и Prettier конфликтуют - PullRequest
1 голос
/ 07 марта 2020

У меня возникла очень раздражающая проблема, когда какой-то конфликт настроек не позволяет корректировать файл, как следует. Я использую Wes Bos 'ESLint / Prettier . Например, у меня есть файл Vue:

<script>
import { mapState, mapActions } from "vuex";

export default {
  data: () => ({
    valid: false           <-------- Also receive eslint(comma-dangle) error here
  }),
  computed: {
    ...mapState("account", ["status"]),
  },
  methods: {
    ...mapActions("account", ["login", "logout"]),
  },
  created() {}
};
</script>

Однако в моем .eslintr c у меня есть это правило, потому что я предпочитаю, чтобы код скрипта был с отступом один раз:

"vue/script-indent": [
  "warn",
  2,
  {
    "baseIndent": 1
  }
],

Когда я сохраняю файл, чтобы позволить Преттиеру переформатировать и исправить эти ошибки, я вижу, что проблемы с запятыми и отступами решаются за доли секунды до того, как они возвращаются назад и снова показывают все ошибки. Где происходит конфликт?

ESLint / Prettier очень нов для меня, и я просто пытаюсь создать хорошую систему! Любая помощь будет принята с благодарностью.

Другие связанные файлы:

Настройки VSCode. json

{
    "breadcrumbs.enabled": true,

    "editor.autoClosingBrackets": "always",
    "editor.autoClosingQuotes": "always",
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.fontFamily": "FiraCode-Retina",
    "editor.fontWeight": "500",
    "editor.letterSpacing": 0.5,
    "editor.lineHeight": 20,
    "editor.minimap.enabled": false,
    "editor.tabSize": 2,

    "emmet.includeLanguages": {
        "erb": "html",
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html",
        "scss": "scss"
    },

    "files.associations": {
        "*.js.erb": "javascript"
    },

    "gitlens.codeLens.authors.enabled": false,
    "gitlens.codeLens.recentChange.enabled": false,
    "gitlens.hovers.currentLine.over": "line",

    "html.format.indentInnerHtml": true,

    "javascript.preferences.quoteStyle": "single",

    "search.useReplacePreview": false,

    "terminal.integrated.fontWeightBold": "normal",

    "workbench.colorTheme": "Atom One Dark",
    "workbench.editor.tabCloseButton": "left",
    "workbench.iconTheme": "material-icon-theme",

    "vim.statusBarColors.normal": "#f4f4f4",

    // These are all my auto-save configs
    "editor.formatOnSave": true,
    // turn it off for JS and JSX, we will do this via eslint
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    // tell the ESLint plugin to run on save
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
    "prettier.disableLanguages": [
        "javascript",
        "javascriptreact"
    ],
}

пакет. json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vuex-orm/core": "0.33.0",
    "@vuex-orm/plugin-axios": "^0.7.0",
    "axios": "^0.19.0",
    "convert-units": "^2.3.4",
    "core-js": "^2.6.5",
    "dayjs": "^1.8.16",
    "echarts": "^4.3.0",
    "fibers": "^4.0.1",
    "lodash": "^4.17.15",
    "material-design-icons-iconfont": "^5.0.1",
    "sass": "^1.23.0",
    "sass-loader": "7.1.0",
    "vee-validate": "^3.0.11",
    "vue": "^2.6.10",
    "vue-headful": "^2.0.1",
    "vue-router": "^3.0.3",
    "vuedraggable": "^2.23.2",
    "vuetify": "2.1.9",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-vuetify": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

1 Ответ

0 голосов
/ 16 марта 2020

Я думаю, что причиной конфликта является этот параметр в настройках . json:

"editor.formatOnSave": true,

для редактора установлено значение "editor.tabSize": 2, а по умолчанию более привлекательный параметр - "none" для запятой. Поэтому он должен переопределять любые настройки, которые были у вас для eslint, которые запускаются при сохранении. Вы можете попробовать установить:

"editor.formatOnSave": false,

или вы можете изменить настройку editor.tabSize и добавить

"prettier.trailingComma": "es5",
...