Почему не работает форматирование в VSC?

Question

[Danya Kozlovskiy]

Здравствуйте, при работе с vue.js в vsc, когда я нажимаю SHIFT+ALT+F срабатывает форматирование. Как я понял оно наследуется из файла .eslintrc. Я начал делать свой конфиг с нуля для обычного JS и почему-то при нажатии той же комбинации клавиш форматирование не срабатывает, хотя подсветка от eslint:prettier работает.

Чтобы допустим вот этот объект, который подсвечивает мне eslint, делался красивым объектом разбитый на строчки (во vue так работает).


.eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
  },
  parser: 'babel-eslint',
  extends: ['google', 'prettier'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'warn'
  },
  env: {
    browser: true,
    node: true,
  },
};

package.json:

"browsersList": "> 0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "eslint": "^7.18.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-prettier": "^3.3.1",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.4",
    "node-sass": "^5.0.0",
    "prettier": "^2.2.1",
    "sass-loader": "^10.1.1",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack serve --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  }
}

webpack.config.js:

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = ext => isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`

const jsLoaders = () => {
  const loaders = [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@bable/preset-env']
      }
    }
  ]

  if (isDev) {
    loaders.push('eslint-loader')
  }
}

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core')
    }
  },
  devServer: {
    port: 8811,
    hot: isDev,
    contentBase: path.join(__dirname, 'dist'),
    compress: true
  },
  devtool: isDev ? 'source-map' : false,
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd
      }
    }),
    new CopyPlugin({
      patterns: [
        { from: path.resolve(__dirname, 'src/favicon.ico'), to: path.resolve(__dirname, 'dist') }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: filename('css')
    })
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          { loader: MiniCssExtractPlugin.loader, },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: jsLoaders()
      }
    ]
  }
}

Answer 1

[Danya Kozlovskiy]

Проблема была в settings.json, в этой строчке стояло форматирование от typescript, а должно от prettier.
Должно быть так:

"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "eslint.format.enable": true,
    },

Answer 2

[Daniil Vasilyev]

VSC не умеет сама определять ваш code-style. Или через настройки, или через расширение ESLInt надо делать.

UPD. В конце концов можно поставить пакеты standardx и snazzy, и уже через терминал производить автоматическое форматирование кода.
standardx --fix --verbose | snazzy
Команду можно добавить в package.json

{
  "scripts": {
    "lint": "standardx --fix --verbose | snazzy",
  }
}

И вызывать через
npm run lint

Comments

[Danya Kozlovskiy]

hello_my_name_is_dany, но почему тогда в проектах с vue всё работает?

[WbICHA]

или через расширение ESLInt надо делать.

Причём здесь еслинт? За форматирование преттиер отвечает.

Danya Kozlovskiy, в настройках вскода поставь преттиер дефолтным форматтером кода.

[Danya Kozlovskiy]

WbICHA, поставил, не работает. Я хочу чтобы допустим вот этот объект, который подсвечивает мне eslint, делался красивым объектом разбитый на строчки (во vue так работ
ает).