2

No se si pertenezca, pero si alguien me puede ayudar le agradecería mucho.

Estoy tratando de editar unos codigos css y javascript, pero cuando abro estos archivos estos no tienen un formato entendible.

Esto me muestra en phpStorm

introducir la descripción de la imagen aquí

de similar forma los js(Me los muestra en solo una linea):

$(document).ready(function(){"use strict";var e=$("body");$(function(){$(".preloader").fadeOut(),$("#side-menu").metisMenu()}),$(".open-close").on("click",function(){e.toggleClass("show-sidebar").toggleClass("hide-sidebar"),$(".sidebar-head .open-close i").toggleClass("ti-menu")}),$(function(){var i=function(){var i=60,s=window.innerWidth>0?window.innerWidth:this.screen.width,l=(window.innerHeight>0?window.innerHeight:this.screen.height)-1;s<768?($("div.navbar-collapse").addClass("collapse"),i=100):$("div.navbar-collapse").removeClass("collapse"),s<1170?(e.addClass("content-wrapper"),$(".sidebar-nav, .slimScrollDiv").css("overflow-x","visible").parent().css("overflow","visible")):e.removeClass("content-wrapper"),l-=i,l<1&&(l=1),l>i&&$("#page-wrapper").css("min-height",l+"px")},s=window.location,l=$("ul.nav a").filter(function(){return this.href===s||0===s.href.indexOf(this.href)}).addClass("active").parent().parent().addClass("in").parent();l.is("li")&&l.addClass("active"),$(window).ready(i),$(window).bind("resize",i)}),$(".list-task li label").on("click",function(){$(this).toggleClass("task-done")}),$(".settings_box a").on("click",function(){$("ul.theme_color").toggleClass("theme_block")}),$(".collapseble").on("click",function(){$(".collapseblebox").fadeToggle(350)}),$(".slimscrollright").slimScroll({height:"100%",position:"right",size:"5px",color:"#dcdcdc"}),$(".slimscrollsidebar").slimScroll({height:"100%",position:"right",size:"6px",color:"rgba(0,0,0,0.3)"}),$(".chat-list").slimScroll({height:"100%",position:"right",size:"0px",color:"#dcdcdc"}),e.trigger("resize"),$(".visited li a").on("click",function(e){$(".visited li").removeClass("active");var i=$(this).parent();i.hasClass("active")||i.addClass("active"),e.preventDefault()}),$("#to-recover").on("click",function(){$("#loginform").slideUp(),$("#recoverform").fadeIn()}),$(".navbar-toggle").on("click",function(){$(".navbar-toggle i").toggleClass("ti-menu").addClass("ti-close")})});

De similar forma pasa en sublimeText y atom

Si alguien supiera como dar un formato entendible(identación), o que libreria tengo que utilizar se los agradeceria.

2
  • 2
    Por lo que veo los archivos estan minificados. En este caso puedes hacer el reverso de esto. Acá te dejo enlace de un paquete de sublime para unminifi. packagecontrol.io/packages/CSS%20Unminifier. Pruebalo a ver que tal te va. tambien puedes probar con esta página. unminify.com
    – joalquipe
    el 10 abr. 2018 a las 15:22
  • Aunque ya respondieron correctamente, dejo por aquí mi pequeña aportación. Si solo quiero visualizar el código de forma rápida, no tengo un editor a mano, o no me se el atajo del que tengo instalado, uso estas webs que te lo identa al momento: Javascript: - jsbeautifier.org CSS: - cleancss.com
    – Corpex
    el 10 abr. 2018 a las 16:33

2 respuestas 2

2

Hay una combinación de teclas para esta acción, pero depende de su esquema de asignación de teclas actual. Por ejemplo:

Elija el código para reformatear y presione:

Para Windows:

  • Ctrl + Alt + U

  • Ctrl + Alt + P

  • Ctrl + Alt + Shift + L (phpstorm)

  • Ctrl + Alt + L (phpstorm)

Para Mac:

  • Command + Alt + L

Además puedes cambiar las combinaciones de teclas a tu gusto, pero se hace de forma diferente en cada editor

2
  • Me funciono perfecto el cuarto comando para wimdows
    – Shassain
    el 10 abr. 2018 a las 16:21
  • @Shassain genial me alegra. el 10 abr. 2018 a las 16:28
2

Puedes utilizar el plugin de Sublime Text HTML-CSS-JS Prettify

Lo haces del siguiente modo:

  1. Presiona CTRL + Shift + P
  2. Escribe prettify
  3. Descarga cuando encuentres el que se llama HTML-CSS-JS Prettify

MODO DE USO

Selecciona todo el texto y presiona la combinación de teclas

Ctrl + Shift + H

Fuente original

Mejorar código en sublime text

2
  • Lo intente, pero el paso dos es escribir install package, ademas despues de instalarlo me pidio tener nodejs y me aparece un codigo : "node_path": { "windows": "C:/Program Files/nodejs/node.exe", "linux": "/usr/bin/nodejs", "osx": "/usr/local/bin/node" },
    – Shassain
    el 10 abr. 2018 a las 16:23
  • 1
    te paso el gihub oficial de paquete para indicaciones mejor detalladas espero te sirva github.com/victorporof/Sublime-HTMLPrettify
    – user75901
    el 10 abr. 2018 a las 16:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.