前端格式化工具之Prettier

prettier是什么？

　　prettier是一款代码格式化程序，通过prettier可以根据配置实现代码的格式化。

ESLint 是一款校验程序，prettier是一款格式化程序。

prettier使用：

一、项目有ESLint

1、安装prettier依赖

npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

添加prettier文件

在根目录添加.perttierrc.js文件，并加入下面配置。

 1 module.exports = {
 2     printWidth: 160,
 3     tabWidth: 4,
 4     useTabs: false,
 5     semi: true,
 6     singleQuote: true,
 7     quoteProps: 'preserve',
 8     jsxSingleQuote: false,
 9     trailingComma: 'es5',
10     bracketSpacing: true,
11     arrowParens: 'avoid',
12     rangeStart: 0,
13     rangeEnd: Infinity,
14     requireConfig: false,
15     requirePragma: false,
16     insertPragma: false,
17     endOfLine: 'auto',
18     HTMLWhitespaceSensitivity: 'css',
19     proseWrap: 'preserve',
20     eslintIntegration: false,
21     tslintIntegration: false,
22     stylelintIntegration: false,
23     ignorePath: '.prettierignore',
24     disableLanguages: [''],
25 };

二、项目无ESLint

1、安装ESLint依赖

npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

2、添加eslint文件

在根目录创建.eslintrc.js 并添加配置

 1 module.exports = {
 2     root: true,
 3     env: {
 4         node: true,
 5     },
 6     extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
 7     parserOptions: {
 8         parser: 'babel-eslint',
 9     },
10     rules: {
11         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
12         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
13     },
14 };

3、安装prettier依赖

npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

4、添加prettier文件

在根目录添加.perttierrc.js文件，并加入下面配置。

 1 module.exports = {
 2     printWidth: 160,
 3     tabWidth: 4,
 4     useTabs: false,
 5     semi: true,
 6     singleQuote: true,
 7     quoteProps: 'preserve',
 8     jsxSingleQuote: false,
 9     trailingComma: 'es5',
10     bracketSpacing: true,
11     arrowParens: 'avoid',
12     rangeStart: 0,
13     rangeEnd: Infinity,
14     requireConfig: false,
15     requirePragma: false,
16     insertPragma: false,
17     endOfLine: 'auto',
18     HTMLWhitespaceSensitivity: 'css',
19     proseWrap: 'preserve',
20     eslintIntegration: false,
21     tslintIntegration: false,
22     stylelintIntegration: false,
23     ignorePath: '.prettierignore',
24     disableLanguages: [''],
25 };

三、webstrom配置

1、下载插件perttier 并启用

2、setting设置

　　1) eslint 设置

　　2）file watcher设置

相关阅读:
.NET微服务调查结果
发布基于Orchard Core的友浩达科技官网
Followme Devops实践之路
积极参与开源项目，促进.NET Core生态社区发展
Service Fabric 与 Ocelot 集成
“.Net 社区大会”(dotnetConf) 2018 Day 1 主题演讲
Project file is incomplete. Expected imports are missing 错误解决方案
稳定工作和创业之间的抉择
回顾4180天在腾讯使用C#的历程，开启新的征途
ML-Framework：ML.NET 0.3 带来新组件

原文地址：https://www.cnblogs.com/qianqiang0703/p/14369920.html