morto
@morto
вечный ученик

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

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

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

.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()
      }
    ]
  }
}
  • Вопрос задан
  • 2282 просмотра
Решения вопроса 1
morto
@morto Автор вопроса
вечный ученик
Проблема была в settings.json, в этой строчке стояло форматирование от typescript, а должно от prettier.
Должно быть так:
"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "eslint.format.enable": true,
    },
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@hello_my_name_is_dany
Backend Developer (Node.js, PHP, C#)
VSC не умеет сама определять ваш code-style. Или через настройки, или через расширение ESLInt надо делать.

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

И вызывать через
npm run lint
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы