{"id":22529,"date":"2016-08-08T12:09:40","date_gmt":"2016-08-08T12:09:40","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=8453"},"modified":"2022-01-28T10:15:26","modified_gmt":"2022-01-28T09:15:26","slug":"using-external-tools","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2016\/08\/using-external-tools","title":{"rendered":"How to Set Up ESLint Autofix and Prettier on Save in WebStorm"},"content":{"rendered":"<p><em>Note: This post was updated in January 2022.<\/em><\/p>\n<p>As you might know, WebStorm supports <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/application-development-guidelines.html\" target=\"_blank\" rel=\"noopener\">many technologies<\/a> out of the box. This is true for widely used tools like ESLint and Prettier, too \u2013 you can start working with them without installing any plugins. Let\u2019s see how you can set up WebStorm to run <code>eslint --fix<\/code> as well as Prettier on saving a file with <em>\u2318S \/ Ctrl+S<\/em>.<\/p>\n<p>These instructions will work for other JetBrains IDEs like IntelliJ IDEA, PhpStorm, and PyCharm, too. Please make sure you have the <a href=\"https:\/\/plugins.jetbrains.com\/plugin\/10456-prettier\" target=\"_blank\" rel=\"noopener\">Prettier plugin<\/a> installed in <em>Preferences \/ Settings | Plugins<\/em> \u2013 it isn\u2019t bundled with some IDEs.<\/p>\n<ul>\n<li><a href=\"#set_up_eslint_to_autofix_files\">Set up ESLint to autofix files<\/a><\/li>\n<li><a href=\"#reformat_code_on_save_with_prettier\">Reformat code on save with Prettier<\/a><\/li>\n<\/ul>\n<h2 id=\"set_up_eslint_to_autofix_files\">Set up ESLint to autofix files<\/h2>\n<p>First, you need to install and configure ESLint in your IDE. For information on how to do so, check out <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/eslint.html#ws_js_linters_eslint_before_you_start\" target=\"_blank\" rel=\"noopener\">our documentation<\/a>.<\/p>\n<p>To enable running <code>eslint --fix<\/code> on save for the current project, go to <em>Preferences \/ Settings | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint<\/em> and tick the <em>Run <code>eslint --fix<\/code> on save<\/em> checkbox. By default, WebStorm will run ESLint to autofix <em>.js<\/em>, <em>.ts<\/em>, <em>.jsx<\/em>, <em>.tsx<\/em>, <em>.html<\/em>, and <em>.vue<\/em> files. If you want to use it for other file types, don&#8217;t forget to specify them under the <em>Run for files<\/em> field using <a href=\"https:\/\/github.com\/isaacs\/node-glob\" target=\"_blank\" rel=\"noopener\">glob patterns<\/a>.<\/p>\n<p><img decoding=\"async\" alt=\"eslint-settings\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/08\/eslint-settings.png\"><\/p>\n<p>If you want to tweak these settings for all new projects, from the main menu, go to <em>File | New Projects Setup | Preferences \/ Settings for New Projects<\/em> and make the same changes there.<\/p>\n<h2 id=\"reformat_code_on_save_with_prettier\">Reformat code on save with Prettier<\/h2>\n<p>First, make sure you\u2019ve installed and configured Prettier. You can find more information on how to do this <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/prettier.html#ws_prettier_install\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>To configure WebStorm to run Prettier on save, go to <em>Preferences \/ Settings | Languages and Frameworks | JavaScript | Prettier<\/em> and tick the <em>On save<\/em> checkbox. By default, upon pressing <em>\u2318S \/ Ctrl+S <\/em>WebStorm will apply formatting to all <em>.js<\/em>, <em>.ts<\/em>, <em>.jsx<\/em>, and <em>.tsx<\/em> files that you\u2019ve edited in your project. To apply the formatting to other file types, or to limit formatting to files located only in specific directories, you can customize the default configuration by using <a href=\"https:\/\/github.com\/isaacs\/node-glob\" target=\"_blank\" rel=\"noopener\">glob patterns<\/a>.<\/p>\n<p><img decoding=\"async\" alt=\"prettier-settings\" width=\"800\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2016\/08\/prettier-settings.png\"><\/p>\n<p>If you want to apply these settings for all new projects as well, go to <em>File | New Projects Setup | Preferences \/ Settings for New Projects<\/em> in the main menu and make the same changes there.<\/p>\n<h3 id=\"alternative_ways_to_run_prettier_in_webstorm\">Alternative ways to run Prettier in WebStorm<\/h3>\n<p>There are two more ways to run Prettier in WebStorm:<\/p>\n<ul>\n<li>You can use a dedicated action for running Prettier, either by pressing <em>\u2325\u21e7\u2318P \/ Ctrl+Alt+Shift+P<\/em> or by selecting <em>Reformat with Prettier<\/em> from the right-click context menu.<\/li>\n<li>You can set Prettier as your default formatter instead of the one that\u2019s built into WebStorm. This way, Prettier will be invoked whenever you use the <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/reformat-and-rearrange-code.html\" target=\"_blank\" rel=\"noopener\">default formatting action<\/a>. To do so, simply tick the <em>On \u2018Reformat Code\u2019 action<\/em> option in <em>Preferences \/ Settings | Languages &amp; Frameworks | JavaScript | Prettier. <\/em>You can change the scope of the files being formatted or configure the action to work for new projects the same way you would for the <em>On save<\/em> action.<\/li>\n<\/ul>\n<p>That\u2019s about it! To learn more about Prettier, ESLint, and other technologies supported by WebStorm, check out <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/application-development-guidelines.html\" target=\"_blank\" rel=\"noopener\">our documentation<\/a>.<\/p>\n<p><em>The WebStorm team<\/em><\/p>\n","protected":false},"author":221,"featured_media":222157,"comment_status":"open","ping_status":"open","template":"","categories":[601],"tags":[2812,2847],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22529"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/221"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=22529"}],"version-history":[{"count":9,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22529\/revisions"}],"predecessor-version":[{"id":222277,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22529\/revisions\/222277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media\/222157"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22529"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}